-
Notifications
You must be signed in to change notification settings - Fork 6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
mgr/dashboard: Add UI for Cluster-wide OSD Flags configuration
Signed-off-by: Tiago Melo <tmelo@suse.com>
- Loading branch information
Tiago Melo
committed
Jun 18, 2018
1 parent
2d22939
commit 9fc6ff0
Showing
9 changed files
with
254 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
...ashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <cd-modal [modalRef]="bsModalRef"> | ||
| <ng-container class="modal-title" | ||
| i18n>Cluster-wide OSD Flags | ||
| </ng-container> | ||
|
|
||
| <ng-container class="modal-content"> | ||
| <form name="osdFlagsForm" | ||
| #formDir="ngForm" | ||
| [formGroup]="osdFlagsForm" | ||
| novalidate> | ||
| <div class="modal-body"> | ||
| <div class="checkbox checkbox-primary" | ||
| *ngFor="let flag of flags; let last = last"> | ||
| <input type="checkbox" | ||
| [checked]="flag.value" | ||
| (change)="flag.value = !flag.value" | ||
| [name]="flag.code" | ||
| [id]="flag.code" | ||
| [disabled]="flag.disabled"> | ||
| <label [for]="flag.code" | ||
| ng-class="['tc_' + key]"> | ||
| <strong>{{ flag.name }}</strong> | ||
| <br> | ||
| <span class="text-muted">{{ flag.description }}</span> | ||
| </label> | ||
| <hr class="oa-hr-small" | ||
| *ngIf="!last"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="modal-footer"> | ||
| <div class="button-group text-right"> | ||
| <cd-submit-button (submitAction)="submitAction()" | ||
| [form]="osdFlagsForm" | ||
| i18n> | ||
| Submit | ||
| </cd-submit-button> | ||
|
|
||
| <button class="btn btn-link btn-sm" | ||
| (click)="bsModalRef.hide()" | ||
| i18n> | ||
| Cancel | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </ng-container> | ||
| </cd-modal> |
Empty file.
38 changes: 38 additions & 0 deletions
38
...board/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { HttpClientTestingModule } from '@angular/common/http/testing'; | ||
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { ReactiveFormsModule } from '@angular/forms'; | ||
|
|
||
| import { ToastModule } from 'ng2-toastr'; | ||
| import { BsModalRef, ModalModule } from 'ngx-bootstrap'; | ||
|
|
||
| import { SharedModule } from '../../../../shared/shared.module'; | ||
| import { OsdFlagsModalComponent } from './osd-flags-modal.component'; | ||
|
|
||
| describe('OsdFlagsModalComponent', () => { | ||
| let component: OsdFlagsModalComponent; | ||
| let fixture: ComponentFixture<OsdFlagsModalComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [ | ||
| ReactiveFormsModule, | ||
| ModalModule.forRoot(), | ||
| SharedModule, | ||
| HttpClientTestingModule, | ||
| ToastModule.forRoot() | ||
| ], | ||
| declarations: [OsdFlagsModalComponent], | ||
| providers: [BsModalRef] | ||
| }).compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(OsdFlagsModalComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
140 changes: 140 additions & 0 deletions
140
.../dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { FormGroup } from '@angular/forms'; | ||
|
|
||
| import * as _ from 'lodash'; | ||
| import { BsModalRef } from 'ngx-bootstrap'; | ||
|
|
||
| import { OsdService } from '../../../../shared/api/osd.service'; | ||
| import { NotificationType } from '../../../../shared/enum/notification-type.enum'; | ||
| import { NotificationService } from '../../../../shared/services/notification.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'cd-osd-flags-modal', | ||
| templateUrl: './osd-flags-modal.component.html', | ||
| styleUrls: ['./osd-flags-modal.component.scss'] | ||
| }) | ||
| export class OsdFlagsModalComponent implements OnInit { | ||
| osdFlagsForm = new FormGroup({}); | ||
|
|
||
| allFlags = { | ||
| noin: { | ||
| code: 'noin', | ||
| name: 'No In', | ||
| value: false, | ||
| description: 'OSDs that were previously marked out will not be marked back in when they start' | ||
| }, | ||
| noout: { | ||
| code: 'noout', | ||
| name: 'No Out', | ||
| value: false, | ||
| description: 'OSDs will not automatically be marked out after the configured interval' | ||
| }, | ||
| noup: { | ||
| code: 'noup', | ||
| name: 'No Up', | ||
| value: false, | ||
| description: 'OSDs are not allowed to start' | ||
| }, | ||
| nodown: { | ||
| code: 'nodown', | ||
| name: 'No Down', | ||
| value: false, | ||
| description: | ||
| 'OSD failure reports are being ignored, such that the monitors will not mark OSDs down' | ||
| }, | ||
| pause: { | ||
| code: 'pause', | ||
| name: 'Pause', | ||
| value: false, | ||
| description: 'Pauses reads and writes' | ||
| }, | ||
| noscrub: { | ||
| code: 'noscrub', | ||
| name: 'No Scrub', | ||
| value: false, | ||
| description: 'Scrubbing is disabled' | ||
| }, | ||
| 'nodeep-scrub': { | ||
| code: 'nodeep-scrub', | ||
| name: 'No Deep Scrub', | ||
| value: false, | ||
| description: 'Deep Scrubbing is disabled' | ||
| }, | ||
| nobackfill: { | ||
| code: 'nobackfill', | ||
| name: 'No Backfill', | ||
| value: false, | ||
| description: 'Backfilling of PGs is suspended' | ||
| }, | ||
| norecover: { | ||
| code: 'norecover', | ||
| name: 'No Recover', | ||
| value: false, | ||
| description: 'Recovery of PGs is suspended' | ||
| }, | ||
| sortbitwise: { | ||
| code: 'sortbitwise', | ||
| name: 'Bitwise Sort', | ||
| value: true, | ||
| description: 'Use bitwise sort', | ||
| disabled: true | ||
| }, | ||
| purged_snapdirs: { | ||
| code: 'purged_snapdirs', | ||
| name: 'Purged Snapdirs', | ||
| value: true, | ||
| description: 'OSDs have converted snapsets', | ||
| disabled: true | ||
| }, | ||
| recovery_deletes: { | ||
| code: 'recovery_deletes', | ||
| name: 'Recovery Deletes', | ||
| value: true, | ||
| description: 'Deletes performed during recovery instead of peering', | ||
| disabled: true | ||
| } | ||
| }; | ||
| flags: any[]; | ||
| unknownFlags: string[] = []; | ||
|
|
||
| constructor( | ||
| public bsModalRef: BsModalRef, | ||
| private osdService: OsdService, | ||
| private notificationService: NotificationService | ||
| ) {} | ||
|
|
||
| ngOnInit() { | ||
| this.osdService.getFlags().subscribe((res: string[]) => { | ||
| res.forEach((value) => { | ||
| if (this.allFlags[value]) { | ||
| this.allFlags[value].value = true; | ||
| } else { | ||
| this.unknownFlags.push(value); | ||
| } | ||
| }); | ||
| this.flags = _.toArray(this.allFlags); | ||
| }); | ||
| } | ||
|
|
||
| submitAction() { | ||
| const newFlags = this.flags | ||
| .filter((flag) => flag.value) | ||
| .map((flag) => flag.code) | ||
| .concat(this.unknownFlags); | ||
|
|
||
| this.osdService.updateFlags(newFlags).subscribe( | ||
| (res) => { | ||
| console.log(res); | ||
| this.notificationService.show( | ||
| NotificationType.success, | ||
| 'OSD Flags were updated successfully.', | ||
| 'OSD Flags' | ||
| ); | ||
| this.bsModalRef.hide(); | ||
| }, | ||
| () => { | ||
| this.bsModalRef.hide(); | ||
| } | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters