Skip to content

Commit

Permalink
UI-notifications for LCR (#7081)
Browse files Browse the repository at this point in the history 
* UI-notifications for LCR

Signed-off-by: Sahiba31 <sahibagoyal1999@gmail.com>

* UI notifications for LCR

Signed-off-by: Sahiba31 <sahibagoyal1999@gmail.com>

* UI notifications for LCR

Signed-off-by: Sahiba31 <sahibagoyal1999@gmail.com>
  • Loading branch information
@Sahiba31
Sahiba31 authored May 30, 2022
1 parent b8fe9ab commit 488f487
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 51 deletions.
20 changes: 12 additions & 8 deletions components/automate-ui/src/app/entities/download-reports/download-reports.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export class DownloadReportsService implements OnDestroy {
downloadSubscription: Subscription;
reportListSubscription: Subscription;
notificationItems = {};
mySet = new Set();
retryLongPoll = 0;
private subject = new Subject();
obs$ = this.subject.asObservable();
Expand Down Expand Up @@ -88,26 +89,29 @@ export class DownloadReportsService implements OnDestroy {
let isLongPollNeededNextTime = false;
for (const report of this.reportList) {
if (report.status === 'running') {
this.mySet.add(report.acknowledgement_id)
isLongPollNeededNextTime = true;
} else {
const status = report.status;
const format = report.report_type.toUpperCase();
if (status === 'success') {
if (this.notificationItems['ack_' + report.acknowledgement_id]) {
if (this.mySet.has(report.acknowledgement_id)) {
this.store.dispatch(new ClearNotificationReport(report.acknowledgement_id));
this.store.dispatch(new CreateNotification({
type: Type.info,
message: format + ' report is ready for download.'
}));
this.mySet.delete(report.acknowledgement_id);
}
} else if (status === 'failed') {
if (this.notificationItems['ack_' + report.acknowledgement_id]) {
this.store.dispatch(new ClearNotificationReport(report.acknowledgement_id));
this.store.dispatch(new CreateNotification({
type: Type.error,
message: format + ' report is failed for download.'
}));
}
if (this.mySet.has(report.acknowledgement_id)) {
this.store.dispatch(new ClearNotificationReport(report.acknowledgement_id));
this.store.dispatch(new CreateNotification({
type: Type.error,
message: format + ' report is failed for download.'
}));
this.mySet.delete(report.acknowledgement_id);
}
}
}
}
Expand Down
84 changes: 43 additions & 41 deletions components/automate-ui/src/app/pages/+compliance/+reporting/reporting.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,17 @@
<main>
<chef-page-header>
<chef-heading>Reports</chef-heading>
<chef-subheading>Compliance reports describe the status of scanned infrastructure. Filtering by a profile, or a profile and one associated control, will enable deep filtering, which will also reflect on the status of the node.</chef-subheading>
<chef-subheading>Compliance reports describe the status of scanned infrastructure. Filtering by a profile, or a
profile and one associated control, will enable deep filtering, which will also reflect on the status of the
node.</chef-subheading>
</chef-page-header>

<div class="reporting-header">
<app-reporting-searchbar
[date]="endDate$ | async"
[filters]="filters$ | async"
[last24h]="(reportQuery.state | async).last24h"
[filterTypes]="availableFilterTypes"
[filterValues]="availableFilterValues"
(suggestValues)="onSuggestValues($event)"
(filtersCleared)="onFiltersClear($event)"
(filterRemoved)="onFilterRemoved($event)"
(filterAdded)="onFilterAdded($event)"
(dateChanged)="onEndDateChanged($event)"
<app-reporting-searchbar [date]="endDate$ | async" [filters]="filters$ | async"
[last24h]="(reportQuery.state | async).last24h" [filterTypes]="availableFilterTypes"
[filterValues]="availableFilterValues" (suggestValues)="onSuggestValues($event)"
(filtersCleared)="onFiltersClear($event)" (filterRemoved)="onFilterRemoved($event)"
(filterAdded)="onFilterAdded($event)" (dateChanged)="onEndDateChanged($event)"
(last24Selected)="onLast24Selected()">
</app-reporting-searchbar>
<div class="download-report" data-cy="download-dropdown">
Expand All @@ -29,7 +25,10 @@
<ul class="menu-list">
<li (click)="onDownloadOptPressed('json')"><span>Download JSON</span></li>
<li (click)="onDownloadOptPressed('csv')" data-cy="download-csv"><span>Download CSV</span></li>
<li *ngIf="appConfigService.isLargeReportingEnabled" (click)="hideDownloadDropdown();downloadReportsService.onReportOpenClick()" data-cy="open-report"><span>Open Report</span></li>
<li *ngIf="appConfigService.isLargeReportingEnabled"
(click)="hideDownloadDropdown();downloadReportsService.onReportOpenClick()" data-cy="open-report">
<span>Open Report</span>
</li>
</ul>
</chef-click-outside>
</chef-dropdown>
Expand All @@ -52,16 +51,13 @@

<!--Reporting Summary-->
<div class="reporting-summary">
<div
*ngIf="reportData.reportingSummaryEmpty"
class="empty-summary">
<div *ngIf="reportData.reportingSummaryEmpty" class="empty-summary">
<p>
There are no compliance scans to display report metadata. Learn how to start your first <a href="https://docs.chef.io/automate/data_collection" target="_blank">compliance scan</a>.
There are no compliance scans to display report metadata. Learn how to start your first <a
href="https://docs.chef.io/automate/data_collection" target="_blank">compliance scan</a>.
</p>
</div>
<div
*ngIf="!reportData.reportingSummaryEmpty && !!reportData.reportingSummary"
class="summary"
<div *ngIf="!reportData.reportingSummaryEmpty && !!reportData.reportingSummary" class="summary"
[ngClass]="reportData.reportingSummary.status">
<div class="summary-toggle" (click)="toggleSummary()">
<p>
Expand All @@ -85,7 +81,8 @@
<tr>
<th id="report-date-label">
Report Date
<chef-tooltip for="report-date-label">Latest information available for everything at this date.</chef-tooltip>
<chef-tooltip for="report-date-label">Latest information available for everything at this date.
</chef-tooltip>
</th>
<td>
<app-time [time]="(endDate$ | async)"></app-time>
Expand All @@ -105,7 +102,8 @@
</th>
<td>
{{ reportData.reportingSummary.stats.platforms | number }}
{{ reportData.reportingSummary.stats.platforms | i18nPlural: {'=1': 'Platform', 'other': 'Platforms'} }}
{{ reportData.reportingSummary.stats.platforms | i18nPlural: {'=1': 'Platform', 'other': 'Platforms'}
}}
</td>
</tr>
<tr>
Expand All @@ -114,7 +112,8 @@
</th>
<td>
{{ reportData.reportingSummary.stats.environments | number }}
{{ reportData.reportingSummary.stats.environments | i18nPlural: {'=1': 'Environment', 'other': 'Environments'} }}
{{ reportData.reportingSummary.stats.environments | i18nPlural: {'=1': 'Environment', 'other':
'Environments'} }}
</td>
</tr>
<tr>
Expand All @@ -134,31 +133,32 @@
<!--Tabs (Overview, Nodes, Profiles)-->
<ul class="nav-tabs-list">
<li class="nav-tabs-item">
<a class="nav-tab" routerLink="/compliance/reports/overview" routerLinkActive="active" queryParamsHandling="preserve">Overview</a>
<a class="nav-tab" routerLink="/compliance/reports/overview" routerLinkActive="active"
queryParamsHandling="preserve">Overview</a>
</li>
<li class="nav-tabs-item">
<a class="nav-tab" routerLink="/compliance/reports/nodes" routerLinkActive="active" queryParamsHandling="preserve" data-cy="nodes-tab">
<a class="nav-tab" routerLink="/compliance/reports/nodes" routerLinkActive="active"
queryParamsHandling="preserve" data-cy="nodes-tab">
{{reportData.reportingSummary?.stats.nodes | number }} Nodes
</a>
</li>
<li class="nav-tabs-item">
<a class="nav-tab" routerLink="/compliance/reports/profiles" routerLinkActive="active" queryParamsHandling="preserve">
<a class="nav-tab" routerLink="/compliance/reports/profiles" routerLinkActive="active"
queryParamsHandling="preserve">
{{reportData.reportingSummary?.stats.profiles | number }} Profiles
</a>
</li>
<li class="nav-tabs-item">
<a class="nav-tab" routerLink="/compliance/reports/controls" routerLinkActive="active" queryParamsHandling="preserve">
<a class="nav-tab" routerLink="/compliance/reports/controls" routerLinkActive="active"
queryParamsHandling="preserve">
{{reportData.reportingSummary?.stats.controls | number }} Controls
</a>
</li>
</ul>

<router-outlet></router-outlet>

<chef-modal
id="download-modal"
title="download-title"
[visible]="downloadStatusVisible"
<chef-modal id="download-modal" title="download-title" [visible]="downloadStatusVisible"
(closeModal)="hideDownloadStatus()">
<ng-container *ngIf="downloadInProgress">
<h2 id="download-report" class="display4" slot="title">Downloading report...</h2>
Expand All @@ -185,10 +185,12 @@ <h3><strong>Generated Reports</strong></h3>
<th scope="col">Duration</th>
</tr>
<ng-container *ngIf="downloadReportsService.reportList.length > 0">
<tr *ngFor="let report of downloadReportsService.reportList; index as i" [ngClass]="{'json': report.report_type === 'json', 'csv': report.report_type === 'csv'}">
<tr *ngFor="let report of downloadReportsService.reportList; index as i"
[ngClass]="{'json': report.report_type === 'json', 'csv': report.report_type === 'csv'}">
<ng-container>
<td *ngIf="report.status === 'success'" class="success-status">
<a (click)="showDownloadStatus();downloadReportsService.onLinkToDownload(report)" class="download-link">
<a (click)="showDownloadStatus();downloadReportsService.onLinkToDownload(report)"
class="download-link">
<app-time [time]='report.created_at'></app-time>
</a>
</td>
Expand All @@ -199,17 +201,17 @@ <h3><strong>Generated Reports</strong></h3>
<app-time [time]='report.created_at'></app-time>
</td>
</ng-container>
<td *ngIf="report.status === 'success'">{{ downloadReportsService.byteConverter(report.report_size) }}</td>
<td *ngIf="report.status === 'success'">{{ downloadReportsService.byteConverter(report.report_size) }}
</td>
<ng-container *ngIf="report.status === 'failed'">
<td [id]="'error-message-' + i" class="failed-status error-message">{{ report.err_message }}</td>
</ng-container>
</ng-container>
<td *ngIf="report.status === 'running'" class="running-status">In progress...</td>
<td *ngIf="report.status === 'success' || report.status === 'failed'">{{report.duration}}</td>
<ng-container *ngIf="report.status === 'failed'"> <!-- keep this tooltip at last to avoid extra empty space between columns -->
<chef-tooltip
[attr.for]="'error-message-' + i"
position="top"
delay="0">{{ report.err_message }}</chef-tooltip>
<ng-container *ngIf="report.status === 'failed'">
<!-- keep this tooltip at last to avoid extra empty space between columns -->
<chef-tooltip [attr.for]="'error-message-' + i" position="top" delay="0">{{ report.err_message }}
</chef-tooltip>
</ng-container>
</tr>
</ng-container>
Expand All @@ -221,4 +223,4 @@ <h4 class="display4 no-reports-message">No reports are available to download.</h
</chef-side-panel>
</main>
</div>
</div>
</div>
6 changes: 4 additions & 2 deletions components/automate-ui/src/app/pages/+compliance/+reporting/reporting.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,11 +301,11 @@ export class ReportingComponent implements OnInit, OnDestroy {
const onError = _e => this.downloadFailed = true;
const onNext = data => {
if (this.appConfigService.isLargeReportingEnabled) {
this.store.dispatch(new AckDownloadReports(JSON.parse(data).acknowledgement_id));
this.store.dispatch(new CreateNotification({
type: Type.info,
message: 'Download request is submitted. You will get notification once it is ready for download.'
}));
this.store.dispatch(new AckDownloadReports(data.acknowledgement_id));
this.downloadReportsService.initiateLongPolling();
} else {
const types = { 'json': 'application/json', 'csv': 'text/csv' };
Expand All @@ -317,7 +317,9 @@ export class ReportingComponent implements OnInit, OnDestroy {
};

this.downloadList = [filename];
this.showDownloadStatus();
if (!this.appConfigService.isLargeReportingEnabled){
this.showDownloadStatus();
}
this.statsService.downloadReport(format, reportQuery).pipe(
finalize(onComplete))
.subscribe(onNext, onError);
Expand Down

0 comments on commit 488f487

Please sign in to comment.