Skip to content

Commit

Permalink
Merge pull request ceph#37193 from rhcs-dashboard/log_download
Browse files Browse the repository at this point in the history
Reviewed-by: Aashish Sharma <[email protected]>
Reviewed-by: Ernesto Puerta <[email protected]>
Reviewed-by: Tatjana Dehler <[email protected]>
Reviewed-by: Tiago Melo <[email protected]>
Reviewed-by: Volker Theile <[email protected]>
  • Loading branch information
Lenz Grimmer authored Oct 23, 2020
2 parents 1e131d5 + f4c3ac1 commit 6434564
Show file tree
Hide file tree
Showing 14 changed files with 165 additions and 41 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { RouterModule } from '@angular/router';
import { TreeModule } from '@circlon/angular-tree-component';
import {
NgbDatepickerModule,
NgbDropdownModule,
NgbNavModule,
NgbPopoverModule,
NgbTimepickerModule,
Expand Down Expand Up @@ -68,7 +69,8 @@ import { TelemetryComponent } from './telemetry/telemetry.component';
TreeModule,
CephSharedModule,
NgbDatepickerModule,
NgbPopoverModule
NgbPopoverModule,
NgbDropdownModule
],
declarations: [
HostsComponent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,19 @@
<ng-template ngbNavContent>
<div class="card bg-light mb-3"
*ngIf="clog">
<div class="btn-group"
role="group"
(click)="logToText(clog)"
*ngIf="clog.length">
<cd-download-button [objectItem]="clog"
[textItem]="logText"
fileName="cluster_log">
</cd-download-button>
<button type="button"
class="btn btn-light"
[cdCopy2ClipboardButton]="logText"
[byId]="false"></button>
</div>
<div class="card-body">
<p *ngFor="let line of clog">
<span class="timestamp">{{ line.stamp | cdDate }}</span>
Expand All @@ -29,6 +42,19 @@
<ng-template ngbNavContent>
<div class="card bg-light mb-3"
*ngIf="audit_log">
<div class="btn-group"
role="group"
(click)="logToText(audit_log)"
*ngIf="audit_log.length">
<cd-download-button [objectItem]="audit_log"
[textItem]="logText"
fileName="audit_log">
</cd-download-button>
<button type="button"
class="btn btn-light"
[cdCopy2ClipboardButton]="logText"
[byId]="false"></button>
</div>
<div class="card-body">
<p *ngFor="let line of audit_log">
<span class="timestamp">{{ line.stamp | cdDate }}</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ p {
}

.card {
.btn-group {
margin-top: -45px;
position: absolute;
right: 0;
}

div p {
display: flex;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export class LogsComponent implements OnInit, OnDestroy {
clog: Array<any>;
audit_log: Array<any>;
icons = Icons;
logText: string;

interval: number;
priorities: Array<{ name: string; value: string }> = [
Expand Down Expand Up @@ -136,4 +137,18 @@ export class LogsComponent implements OnInit, OnDestroy {

return false;
}

logToText(log: object) {
this.logText = '';
for (const line of Object.keys(log)) {
this.logText =
this.logText +
this.datePipe.transform(log[line].stamp, 'medium') +
'\t' +
log[line].priority +
'\t' +
log[line].message +
'\n';
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -262,17 +262,16 @@
</div>
<div class="form-group row">
<div class="cd-col-form-offset">
<button type="button"
class="btn btn-light mr-2"
title="Download"
(click)="download(report, 'telemetry_report.json')"
i18n-title>
<i class="fa fa-download"></i>
</button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="report">
</button>
<div class="btn-group"
role="group">
<cd-download-button [objectItem]="report"
fileName="telemetry_report">
</cd-download-button>
<button type="button"
class="btn btn-light"
cdCopy2ClipboardButton="report">
</button>
</div>
</div>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,21 @@ import { ReactiveFormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

import { DownloadButtonComponent } from 'app/shared/components/download-button/download-button.component';
import _ from 'lodash';
import { ToastrModule } from 'ngx-toastr';
import { of as observableOf } from 'rxjs';

import { configureTestBed } from '../../../../testing/unit-test-helper';
import { MgrModuleService } from '../../../shared/api/mgr-module.service';
import { TelemetryService } from '../../../shared/api/telemetry.service';
import { LoadingPanelComponent } from '../../../shared/components/loading-panel/loading-panel.component';
import { TextToDownloadService } from '../../../shared/services/text-to-download.service';
import { SharedModule } from '../../../shared/shared.module';
import { TelemetryComponent } from './telemetry.component';

describe('TelemetryComponent', () => {
let component: TelemetryComponent;
let fixture: ComponentFixture<TelemetryComponent>;
let mgrModuleService: MgrModuleService;
let telemetryService: TelemetryService;
let options: any;
let configs: any;
let httpTesting: HttpTestingController;
Expand Down Expand Up @@ -58,7 +56,7 @@ describe('TelemetryComponent', () => {
ToastrModule.forRoot()
]
},
[LoadingPanelComponent]
[LoadingPanelComponent, DownloadButtonComponent]
);

describe('configForm', () => {
Expand Down Expand Up @@ -135,16 +133,10 @@ describe('TelemetryComponent', () => {
});

describe('previewForm', () => {
const reportText = {
testA: 'testA',
testB: 'testB'
};

beforeEach(() => {
fixture = TestBed.createComponent(TelemetryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
telemetryService = TestBed.inject(TelemetryService);
httpTesting = TestBed.inject(HttpTestingController);
router = TestBed.inject(Router);
spyOn(router, 'navigate');
Expand All @@ -154,16 +146,6 @@ describe('TelemetryComponent', () => {
expect(component).toBeTruthy();
});

it('should call TextToDownloadService download function', () => {
spyOn(telemetryService, 'getReport').and.returnValue(observableOf(reportText));
component.ngOnInit();

const downloadSpy = spyOn(TestBed.inject(TextToDownloadService), 'download');
const filename = 'reportText.json';
component.download(reportText, filename);
expect(downloadSpy).toHaveBeenCalledWith(JSON.stringify(reportText, null, 2), filename);
});

it('should submit', () => {
component.onSubmit();
const req = httpTesting.expectOne('api/telemetry');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { CdValidators } from '../../../shared/forms/cd-validators';
import { NotificationService } from '../../../shared/services/notification.service';
import { TelemetryNotificationService } from '../../../shared/services/telemetry-notification.service';
import { TextToDownloadService } from '../../../shared/services/text-to-download.service';

@Component({
selector: 'cd-telemetry',
Expand Down Expand Up @@ -49,7 +48,6 @@ export class TelemetryComponent extends CdForm implements OnInit {
private notificationService: NotificationService,
private router: Router,
private telemetryService: TelemetryService,
private textToDownloadService: TextToDownloadService,
private telemetryNotificationService: TelemetryNotificationService
) {
super();
Expand Down Expand Up @@ -164,10 +162,6 @@ export class TelemetryComponent extends CdForm implements OnInit {
);
}

download(report: object, fileName: string) {
this.textToDownloadService.download(JSON.stringify(report, null, 2), fileName);
}

disableModule(message: string = null, followUpFunc: Function = null) {
this.telemetryService.enable(false).subscribe(() => {
this.telemetryNotificationService.setVisibility(true);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { ConfirmationModalComponent } from './confirmation-modal/confirmation-mo
import { CriticalConfirmationModalComponent } from './critical-confirmation-modal/critical-confirmation-modal.component';
import { DateTimePickerComponent } from './date-time-picker/date-time-picker.component';
import { DocComponent } from './doc/doc.component';
import { DownloadButtonComponent } from './download-button/download-button.component';
import { FormModalComponent } from './form-modal/form-modal.component';
import { GrafanaComponent } from './grafana/grafana.component';
import { HelperComponent } from './helper/helper.component';
Expand Down Expand Up @@ -85,7 +86,8 @@ import { UsageBarComponent } from './usage-bar/usage-bar.component';
TelemetryNotificationComponent,
OrchestratorDocPanelComponent,
DateTimePickerComponent,
DocComponent
DocComponent,
DownloadButtonComponent
],
providers: [],
exports: [
Expand All @@ -108,7 +110,8 @@ import { UsageBarComponent } from './usage-bar/usage-bar.component';
TelemetryNotificationComponent,
OrchestratorDocPanelComponent,
DateTimePickerComponent,
DocComponent
DocComponent,
DownloadButtonComponent
]
})
export class ComponentsModule {}
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<div ngbDropdown
placement="bottom-right">
<button type="button"
[title]="title"
class="btn btn-light dropdown-toggle-split"
ngbDropdownToggle>
<i [ngClass]="[icons.download]"></i>
</button>
<div ngbDropdownMenu>
<button ngbDropdownItem
(click)="download('json')"
*ngIf="objectItem">
<i [ngClass]="[icons.json]"></i>
<span>JSON</span>
</button>
<button ngbDropdownItem
(click)="download()"
*ngIf="textItem">
<i [ngClass]="[icons.text]"></i>
<span>Text</span>
</button>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { configureTestBed } from '../../../../testing/unit-test-helper';
import { TextToDownloadService } from '../../services/text-to-download.service';
import { DownloadButtonComponent } from './download-button.component';

describe('DownloadButtonComponent', () => {
let component: DownloadButtonComponent;
let fixture: ComponentFixture<DownloadButtonComponent>;

configureTestBed({
declarations: [DownloadButtonComponent],
providers: [TextToDownloadService]
});

beforeEach(() => {
fixture = TestBed.createComponent(DownloadButtonComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});

it('should call download function', () => {
component.objectItem = {
testA: 'testA',
testB: 'testB'
};
const downloadSpy = spyOn(TestBed.inject(TextToDownloadService), 'download');
component.fileName = `${'reportText.json'}_${new Date().toLocaleDateString()}`;
component.download('json');
expect(downloadSpy).toHaveBeenCalledWith(
JSON.stringify(component.objectItem, null, 2),
`${component.fileName}.json`
);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { Component, Input } from '@angular/core';

import { Icons } from '../../enum/icons.enum';
import { TextToDownloadService } from '../../services/text-to-download.service';

@Component({
selector: 'cd-download-button',
templateUrl: './download-button.component.html',
styleUrls: ['./download-button.component.scss']
})
export class DownloadButtonComponent {
@Input() objectItem: object;
@Input() textItem: string;
@Input() fileName: any;
@Input() title = $localize`Download`;

icons = Icons;
constructor(private textToDownloadService: TextToDownloadService) {}

download(format?: string) {
this.fileName = `${this.fileName}_${new Date().toLocaleDateString()}`;
if (format === 'json') {
this.textToDownloadService.download(
JSON.stringify(this.objectItem, null, 2),
`${this.fileName}.json`
);
} else {
this.textToDownloadService.download(this.textItem, `${this.fileName}.txt`);
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { ToastrService } from 'ngx-toastr';
export class Copy2ClipboardButtonDirective implements OnInit {
@Input()
private cdCopy2ClipboardButton: string;
@Input()
byId = true;

constructor(
private elementRef: ElementRef,
Expand All @@ -33,7 +35,7 @@ export class Copy2ClipboardButtonDirective implements OnInit {
onClick() {
try {
const browser = detect();
const text = this.getText();
const text = this.byId ? this.getText() : this.cdCopy2ClipboardButton;
const toastrFn = () => {
this.toastr.success('Copied text to the clipboard successfully.');
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ export enum Icons {
download = 'fa fa-download', // Download
upload = 'fa fa-upload', // Upload
close = 'fa fa-times', // Close
json = 'fa fa-file-code-o', // JSON file
text = 'fa fa-file-text', // Text file

/* Icons for special effect */
large = 'fa fa-lg', // icon becomes 33% larger
Expand Down

0 comments on commit 6434564

Please sign in to comment.