{ id: 'mappings', value: [{ options: { '0': { color: 'semi-dark-green', index: 2, text: 'Healthy' }, '1': { color: 'semi-dark-yellow', index: 0, text: 'Warning' }, '2': { color: 'semi-dark-red', index: 1, text: 'Error' } }, type: 'value' }] },
],
},
- {
- matcher: { id: 'byName', options: 'IOPS' },
- properties: [
- { id: 'unit', value: 'ops' },
- ],
- },
- {
- matcher: { id: 'byName', options: 'Value #E' },
- properties: [
- { id: 'unit', value: 'bytes' },
- ],
- },
{
matcher: { id: 'byName', options: 'Capacity Used' },
properties: [
{
matcher: { id: 'byName', options: 'Cluster' },
properties: [
- { id: 'links', value: [{ title: '', url: '/d/GQ3MHvnIz/ceph-cluster-new?var-cluster=${__data.fields.Cluster}&${DS_PROMETHEUS:queryparam}' }] },
+ { id: 'links', value: [{ title: '', url: '/d/edtb0oxdq/ceph-cluster?var-cluster=${__data.fields.Cluster}&${DS_PROMETHEUS:queryparam}' }] },
],
},
{
'Value #A': 1,
'Value #B': 20,
'Value #C': 3,
- 'Value #D': 4,
- 'Value #E': 5,
- 'Value #F': 6,
+ 'Value #D': 6,
'__name__ 1': 9,
'__name__ 2': 14,
'__name__ 3': 24,
renameByName: {
'Value #A': 'Status',
'Value #C': 'Alerts',
- 'Value #D': 'IOPS',
- 'Value #E': 'Throughput',
- 'Value #F': 'Capacity Used',
+ 'Value #D': 'Capacity Used',
ceph_version: 'Version',
cluster: 'Cluster',
},
legendFormat='__auto',
range=false,
),
- $.addTargetSchema(
- expr='sum by (cluster) (irate(ceph_pool_wr[$__interval])) \n+ sum by (cluster) (irate(ceph_pool_rd[$__interval])) ',
- datasource={ type: 'prometheus', uid: '$datasource' },
- format='table',
- hide=false,
- exemplar=false,
- instant=true,
- interval='',
- legendFormat='__auto',
- range=false,
- ),
- $.addTargetSchema(
- expr='sum by (cluster) (irate(ceph_pool_rd_bytes[$__interval]))\n+ sum by (cluster) (irate(ceph_pool_wr_bytes[$__interval])) ',
- datasource={ type: 'prometheus', uid: '$datasource' },
- format='table',
- hide=false,
- exemplar=false,
- instant=true,
- interval='',
- legendFormat='__auto',
- range=false,
- ),
$.addTargetSchema(
expr='ceph_cluster_by_class_total_used_bytes',
datasource={ type: 'prometheus', uid: '$datasource' },
"editable": false,
"gnetId": null,
"graphTooltip": 0,
+ "hideControls": false,
"id": null,
"iteration": 1525415495309,
"links": [],
},
"timezone": "",
"title": "Ceph - Cluster",
- "version": 13
+ "uid": "edtb0oxdq",
+ "version": 0
}
}
]
},
- {
- "matcher": {
- "id": "byName",
- "options": "IOPS"
- },
- "properties": [
- {
- "id": "unit",
- "value": "ops"
- }
- ]
- },
- {
- "matcher": {
- "id": "byName",
- "options": "Value #E"
- },
- "properties": [
- {
- "id": "unit",
- "value": "bytes"
- }
- ]
- },
{
"matcher": {
"id": "byName",
"value": [
{
"title": "",
- "url": "/d/GQ3MHvnIz/ceph-cluster-new?var-cluster=${__data.fields.Cluster}&${DS_PROMETHEUS:queryparam}"
+ "url": "/d/edtb0oxdq/ceph-cluster?var-cluster=${__data.fields.Cluster}&${DS_PROMETHEUS:queryparam}"
}
]
}
"range": false,
"refId": "C"
},
- {
- "datasource": {
- "type": "prometheus",
- "uid": "$datasource"
- },
- "exemplar": false,
- "expr": "sum by (cluster) (irate(ceph_pool_wr[$__interval])) \n+ sum by (cluster) (irate(ceph_pool_rd[$__interval])) ",
- "format": "table",
- "hide": false,
- "instant": true,
- "interval": "",
- "intervalFactor": 1,
- "legendFormat": "__auto",
- "range": false,
- "refId": "D"
- },
- {
- "datasource": {
- "type": "prometheus",
- "uid": "$datasource"
- },
- "exemplar": false,
- "expr": "sum by (cluster) (irate(ceph_pool_rd_bytes[$__interval]))\n+ sum by (cluster) (irate(ceph_pool_wr_bytes[$__interval])) ",
- "format": "table",
- "hide": false,
- "instant": true,
- "interval": "",
- "intervalFactor": 1,
- "legendFormat": "__auto",
- "range": false,
- "refId": "E"
- },
{
"datasource": {
"type": "prometheus",
"intervalFactor": 1,
"legendFormat": "__auto",
"range": false,
- "refId": "F"
+ "refId": "D"
}
],
"timeFrom": null,
"Value #A": 1,
"Value #B": 20,
"Value #C": 3,
- "Value #D": 4,
- "Value #E": 5,
- "Value #F": 6,
+ "Value #D": 6,
"__name__ 1": 9,
"__name__ 2": 14,
"__name__ 3": 24,
"renameByName": {
"Value #A": "Status",
"Value #C": "Alerts",
- "Value #D": "IOPS",
- "Value #E": "Throughput",
- "Value #F": "Capacity Used",
+ "Value #D": "Capacity Used",
"ceph_version": "Version",
"cluster": "Cluster"
}
import { UpgradeProgressComponent } from './ceph/cluster/upgrade/upgrade-progress/upgrade-progress.component';
import { MultiClusterComponent } from './ceph/cluster/multi-cluster/multi-cluster.component';
import { MultiClusterListComponent } from './ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component';
+import { MultiClusterDetailsComponent } from './ceph/cluster/multi-cluster/multi-cluster-details/multi-cluster-details.component';
@Injectable()
export class PerformanceCounterBreadcrumbsResolver extends BreadcrumbsResolver {
component: MultiClusterListComponent,
data: {
breadcrumbs: 'Multi-Cluster/Manage Clusters'
- }
+ },
+ children: [
+ {
+ path: 'performance-details',
+ component: MultiClusterDetailsComponent
+ }
+ ]
}
]
},
import { MultiClusterFormComponent } from './multi-cluster/multi-cluster-form/multi-cluster-form.component';
import { MultiClusterListComponent } from './multi-cluster/multi-cluster-list/multi-cluster-list.component';
import { DashboardV3Module } from '../dashboard-v3/dashboard-v3.module';
+import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-details/multi-cluster-details.component';
@NgModule({
imports: [
UpgradeProgressComponent,
MultiClusterComponent,
MultiClusterFormComponent,
- MultiClusterListComponent
+ MultiClusterListComponent,
+ MultiClusterDetailsComponent
],
providers: [NgbActiveModal]
})
--- /dev/null
+<ng-container *ngIf="selection">
+ <nav ngbNav
+ #nav="ngbNav"
+ id="tabset-multi-cluster-details"
+ class="nav-tabs"
+ cdStatefulTab="multi-cluster-details">
+ <ng-container ngbNavItem="performance-details"
+ *ngIf="permissions.grafana.read">
+ <a ngbNavLink
+ routerLink="performance-details"
+ i18n>Performance Details</a>
+ <ng-template ngbNavContent>
+ <cd-grafana i18n-title
+ title="Cluster details"
+ [grafanaPath]="'ceph-cluster?var-cluster=' + selectedClusterFsid"
+ [type]="'metrics'"
+ uid="edtb0oxdq"
+ grafanaStyle="four">
+ </cd-grafana>
+ </ng-template>
+ </ng-container>
+ </nav>
+ <div [ngbNavOutlet]="nav"></div>
+</ng-container>
--- /dev/null
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MultiClusterDetailsComponent } from './multi-cluster-details.component';
+
+describe('MultiClusterDetailsComponent', () => {
+ let component: MultiClusterDetailsComponent;
+ let fixture: ComponentFixture<MultiClusterDetailsComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [MultiClusterDetailsComponent]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(MultiClusterDetailsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'cd-multi-cluster-details',
+ templateUrl: './multi-cluster-details.component.html',
+ styleUrls: ['./multi-cluster-details.component.scss']
+})
+export class MultiClusterDetailsComponent {
+ @Input()
+ permissions: Permissions;
+
+ @Input()
+ selection: any;
+
+ get selectedClusterFsid(): string {
+ return this.selection !== undefined ? this.selection['name'] : null;
+ }
+}
[columns]="columns"
columnMode="flex"
selectionType="single"
+ [hasDetails]="true"
+ (setExpandedRow)="setExpandedRow($event)"
[maxLimit]="25"
(updateSelection)="updateSelection($event)">
<div class="table-actions btn-toolbar">
[tableActions]="tableActions">
</cd-table-actions>
</div>
+ <cd-multi-cluster-details cdTableDetail
+ [permissions]="permissions"
+ [selection]="expandedRow">
+ </cd-multi-cluster-details>
</cd-table>
</ng-template>
</ng-container>
import { CdDatePipe } from '~/app/shared/pipes/cd-date.pipe';
import { TableActionsComponent } from '~/app/shared/datatable/table-actions/table-actions.component';
import { SharedModule } from '~/app/shared/shared.module';
+import { ActivatedRoute } from '@angular/router';
describe('MultiClusterListComponent', () => {
let component: MultiClusterListComponent;
await TestBed.configureTestingModule({
imports: [HttpClientTestingModule, ToastrModule.forRoot(), NgbNavModule, SharedModule],
declarations: [MultiClusterListComponent],
- providers: [CdDatePipe, TableActionsComponent]
+ providers: [CdDatePipe, TableActionsComponent, { provide: ActivatedRoute, useValue: {} }]
}).compileComponents();
fixture = TestBed.createComponent(MultiClusterListComponent);
import { NotificationType } from '~/app/shared/enum/notification-type.enum';
import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
import { MultiCluster } from '~/app/shared/models/multi-cluster';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
import { CookiesService } from '~/app/shared/services/cookie.service';
import { Observable, Subscription } from 'rxjs';
import { SettingsService } from '~/app/shared/api/settings.service';
import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
+import { ListWithDetails } from '~/app/shared/classes/list-with-details.class';
@Component({
selector: 'cd-multi-cluster-list',
templateUrl: './multi-cluster-list.component.html',
styleUrls: ['./multi-cluster-list.component.scss']
})
-export class MultiClusterListComponent implements OnInit, OnDestroy {
+export class MultiClusterListComponent extends ListWithDetails implements OnInit, OnDestroy {
@ViewChild(TableComponent)
table: TableComponent;
@ViewChild('urlTpl', { static: true })
private modalService: ModalService,
private cookieService: CookiesService,
private settingsService: SettingsService,
- private cdsModalService: ModalCdsService
+ private cdsModalService: ModalCdsService,
+ private route: ActivatedRoute
) {
+ super();
this.tableActions = [
{
permission: 'create',
});
}
- updateSelection(selection: CdTableSelection) {
- this.selection = selection;
- }
-
openDeleteClusterModal() {
const cluster = this.selection.first();
this.modalRef = this.cdsModalService.show(CriticalConfirmationModalComponent, {
}
return false;
}
+
+ updateSelection(selection: CdTableSelection) {
+ this.selection = selection;
+ }
+
+ setExpandedRow(expandedRow: any) {
+ super.setExpandedRow(expandedRow);
+ this.router.navigate(['performance-details'], { relativeTo: this.route });
+ }
}
projects / ceph.git / commitdiff