to integrate {warning,error,info} component into alert panel component.
Fixes: https://tracker.ceph.com/issues/41774
Signed-off-by: Patrick Seidensal <pseidensal@suse.com>
<cd-iscsi-tabs></cd-iscsi-tabs>
-<cd-info-panel *ngIf="available === false"
- title="iSCSI Targets not available"
- i18n-title>
+<cd-alert-panel type="info"
+ *ngIf="available === false"
+ title="iSCSI Targets not available"
+ i18n-title>
<ng-container i18n>Please consult the <a href="{{docsUrl}}"
target="_blank">documentation</a>
on how to configure and enable the iSCSI Targets management functionality.</ng-container>
<span i18n>Available information:</span>
<pre>{{ status }}</pre>
</ng-container>
-</cd-info-panel>
+</cd-alert-panel>
<cd-table #table
*ngIf="available === true"
-<cd-info-panel *ngIf="!orchestratorExist && !checkingOrchestrator"
- i18n>Please consult the
+<cd-alert-panel type="info"
+ *ngIf="!orchestratorExist && !checkingOrchestrator"
+ i18n>Please consult the
<a href="{{ docsUrl }}"
target="_blank">documentation</a> on how to
- configure and enable the orchestrator functionality.</cd-info-panel>
+ configure and enable the orchestrator functionality.</cd-alert-panel>
<ng-container *ngIf="orchestratorExist">
<legend i18n>Devices</legend>
</cd-table>
</div>
</div>
-</ng-container>
\ No newline at end of file
+</ng-container>
<cd-loading-panel *ngIf="loading && !error"
i18n>Loading configuration...</cd-loading-panel>
-<cd-error-panel *ngIf="loading && error"
- i18n>The configuration could not be loaded.</cd-error-panel>
+<cd-alert-panel type="error"
+ *ngIf="loading && error"
+ i18n>The configuration could not be loaded.</cd-alert-panel>
<div class="col-sm-12 col-lg-6"
*ngIf="!loading && !error">
[data]="osd.details.osd_metadata">
</cd-table-key-value>
<ng-template #noMetaData>
- <cd-warning-panel i18n>Metadata not available</cd-warning-panel>
+ <cd-alert-panel type="warning" i18n>Metadata not available</cd-alert-panel>
</ng-template>
</tab>
<tab heading="Histogram"
i18n-heading>
- <cd-warning-panel *ngIf="osd.loaded && osd.histogram_failed"
- i18n>Histogram not available: {{ osd.histogram_failed }}</cd-warning-panel>
+ <cd-alert-panel *ngIf="osd.loaded && osd.histogram_failed"
+ type="warning"
+ i18n>Histogram not available: {{ osd.histogram_failed }}</cd-alert-panel>
<div class="row"
*ngIf="osd.loaded && osd.details.histogram">
let-actionDescription="actionDescription">
<div *ngIf="!safeToDestroyResult['is_safe_to_destroy']"
class="danger">
- <cd-warning-panel i18n>The {selection.hasSingleSelection, select, 1 {OSD is} 0 {OSDs are}} not safe to destroy!</cd-warning-panel>
+ <cd-alert-panel type="warning" i18n>The {selection.hasSingleSelection, select, 1 {OSD is} 0 {OSDs are}} not safe to destroy!</cd-alert-panel>
</div>
<ng-container i18n><strong>OSD {{ getSelectedIds() | list }}</strong> will be
<strong>{{ actionDescription }}</strong> if you proceed.</ng-container>
<ng-container *ngIf="!loading; else isLoading">
<ng-container *ngIf="incompatible; else isCompatible">
- <cd-warning-panel i18n>The data received has the JSON format version 2.x and is currently incompatible with the dashboard.</cd-warning-panel>
+ <cd-alert-panel type="warning" i18n>The data received has the JSON format version 2.x and is currently incompatible with the dashboard.</cd-alert-panel>
</ng-container>
<ng-template #isCompatible>
<tabset *ngFor="let device of data | keyvalue">
<tab [heading]="device.value.device + ' (' + device.value.identifier + ')'">
<ng-container *ngIf="device.value.error; else noError">
- <cd-warning-panel>{{ device.value.userMessage }}</cd-warning-panel>
+ <cd-alert-panel type="warning">{{ device.value.userMessage }}</cd-alert-panel>
</ng-container>
<ng-template #noError>
<tabset>
-<cd-info-panel *ngIf="!orchestratorExist && !checkingOrchestrator"
- i18n>Please consult the
+<cd-alert-panel type="info"
+ *ngIf="!orchestratorExist && !checkingOrchestrator"
+ i18n>Please consult the
<a href="{{ docsUrl }}"
target="_blank">documentation</a> on how to
- configure and enable the orchestrator functionality.</cd-info-panel>
+ configure and enable the orchestrator functionality.</cd-alert-panel>
<ng-container *ngIf="orchestratorExist">
<cd-table [data]="services"
(fetchData)="getServices($event)"
selectionType="single">
</cd-table>
-</ng-container>
\ No newline at end of file
+</ng-container>
-<cd-info-panel>
+<cd-alert-panel type="info">
{{ message }}<br>
<ng-container i18n>Please consult the <a href="{{docsUrl}}" target="_blank">documentation</a>
on how to configure and enable the NFS Ganesha management functionality.</ng-container>
-</cd-info-panel>
+</cd-alert-panel>
</ng-template>
</cd-table>
<ng-template #warning>
- <cd-warning-panel i18n>Performance counters not available</cd-warning-panel>
+ <cd-alert-panel type="warning" i18n>Performance counters not available</cd-alert-panel>
</ng-template>
-<cd-info-panel>
+<cd-alert-panel type="info">
{{ message }}<br>
<ng-container i18n>Please consult the <a href="{{docsUrl}}" target="_blank">documentation</a>
on how to configure and enable the Object Gateway management functionality.</ng-container>
-</cd-info-panel>
+</cd-alert-panel>
-<cd-loading-panel *ngIf="editing && loading"
+<cd-loading-panel *ngIf="editing && loading && !error"
i18n>Loading bucket data...</cd-loading-panel>
<div class="col-sm-12 col-lg-6"
- *ngIf="!loading">
+ *ngIf="!loading && !error">
<form name="bucketForm"
#frm="ngForm"
[formGroup]="bucketForm"
<cd-loading-panel *ngIf="editing && loading && !error"
i18n>Loading user data...</cd-loading-panel>
-<cd-error-panel *ngIf="editing && error"
+<cd-alert-panel type="error"
+ *ngIf="editing && error"
(backAction)="goToListView()"
- i18n>The user data could not be loaded.</cd-error-panel>
+ i18n>The user data could not be loaded.</cd-alert-panel>
<div class="col-sm-12 col-lg-6"
*ngIf="!loading && !error">
--- /dev/null
+<alert type="{{ bootstrapClass }}">
+ <table>
+ <tr>
+ <td rowspan="2" class="alert-panel-icon">
+ <i [ngClass]="[icons.large3x]" class="alert-{{ bootstrapClass }} {{ typeIcon }}"
+ aria-hidden="true"></i>
+ </td>
+ <td class="alert-panel-title">{{ title }}</td>
+ </tr>
+ <tr>
+ <td class="alert-panel-text">
+ <ng-content></ng-content>
+ </td>
+ </tr>
+ </table>
+</alert>
+
+<div class="button-group text-right"
+ *ngIf="backAction.observers.length > 0">
+ <button class="btn btn-light tc_backButton"
+ type="button"
+ (click)="backAction.emit()"
+ autofocus
+ i18n>Back</button>
+</div>
--- /dev/null
+.alert-panel-icon {
+ vertical-align: top;
+ padding-right: 15px; // See @alert-padding in bootstrap/less/variables.less
+}
+
+.alert-panel-title {
+ font-weight: bold;
+}
--- /dev/null
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AlertComponent, AlertConfig } from 'ngx-bootstrap/alert';
+
+import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
+import { AlertPanelComponent } from './alert-panel.component';
+
+describe('AlertPanelComponent', () => {
+ let component: AlertPanelComponent;
+ let fixture: ComponentFixture<AlertPanelComponent>;
+
+ configureTestBed({
+ declarations: [AlertPanelComponent, AlertComponent],
+ providers: [AlertConfig, i18nProviders]
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AlertPanelComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { I18n } from '@ngx-translate/i18n-polyfill';
+import { Icons } from '../../enum/icons.enum';
+
+@Component({
+ selector: 'cd-alert-panel',
+ templateUrl: './alert-panel.component.html',
+ styleUrls: ['./alert-panel.component.scss']
+})
+export class AlertPanelComponent implements OnInit {
+ @Input()
+ title = '';
+ @Input()
+ bootstrapClass = '';
+ @Output()
+ backAction = new EventEmitter();
+
+ @Input()
+ type: 'warning' | 'error' | 'info';
+ @Input()
+ typeIcon: Icons | string;
+
+ icons = Icons;
+
+ constructor(private i18n: I18n) {}
+
+ ngOnInit() {
+ switch (this.type) {
+ case 'warning':
+ this.title = this.title || this.i18n('Warning');
+ this.typeIcon = this.typeIcon || Icons.warning;
+ this.bootstrapClass = this.bootstrapClass || 'warning';
+ break;
+ case 'error':
+ this.title = this.title || this.i18n('Error');
+ this.typeIcon = this.typeIcon || Icons.destroyCircle;
+ this.bootstrapClass = this.bootstrapClass || 'danger';
+ break;
+ case 'info':
+ this.title = this.title || this.i18n('Information');
+ this.typeIcon = this.typeIcon || Icons.infoCircle;
+ this.bootstrapClass = this.bootstrapClass || 'info';
+ break;
+ }
+ }
+}
import { DirectivesModule } from '../directives/directives.module';
import { PipesModule } from '../pipes/pipes.module';
+import { AlertPanelComponent } from './alert-panel/alert-panel.component';
import { BackButtonComponent } from './back-button/back-button.component';
import { ConfigOptionComponent } from './config-option/config-option.component';
import { ConfirmationModalComponent } from './confirmation-modal/confirmation-modal.component';
import { CriticalConfirmationModalComponent } from './critical-confirmation-modal/critical-confirmation-modal.component';
-import { ErrorPanelComponent } from './error-panel/error-panel.component';
import { GrafanaComponent } from './grafana/grafana.component';
import { HelperComponent } from './helper/helper.component';
-import { InfoPanelComponent } from './info-panel/info-panel.component';
import { LanguageSelectorComponent } from './language-selector/language-selector.component';
import { LoadingPanelComponent } from './loading-panel/loading-panel.component';
import { ModalComponent } from './modal/modal.component';
import { SubmitButtonComponent } from './submit-button/submit-button.component';
import { UsageBarComponent } from './usage-bar/usage-bar.component';
import { ViewCacheComponent } from './view-cache/view-cache.component';
-import { WarningPanelComponent } from './warning-panel/warning-panel.component';
@NgModule({
imports: [
SelectBadgesComponent,
SubmitButtonComponent,
UsageBarComponent,
- ErrorPanelComponent,
LoadingPanelComponent,
- InfoPanelComponent,
ModalComponent,
CriticalConfirmationModalComponent,
ConfirmationModalComponent,
- WarningPanelComponent,
LanguageSelectorComponent,
GrafanaComponent,
SelectComponent,
BackButtonComponent,
RefreshSelectorComponent,
- ConfigOptionComponent
+ ConfigOptionComponent,
+ AlertPanelComponent
],
providers: [],
exports: [
SelectBadgesComponent,
SubmitButtonComponent,
BackButtonComponent,
- ErrorPanelComponent,
LoadingPanelComponent,
- InfoPanelComponent,
UsageBarComponent,
ModalComponent,
- WarningPanelComponent,
LanguageSelectorComponent,
GrafanaComponent,
SelectComponent,
RefreshSelectorComponent,
- ConfigOptionComponent
+ ConfigOptionComponent,
+ AlertPanelComponent
],
entryComponents: [ModalComponent, CriticalConfirmationModalComponent, ConfirmationModalComponent]
})
+++ /dev/null
-<alert type="danger">
- <table>
- <tr>
- <td rowspan="2"
- class="error-panel-alert-icon">
- <i [ngClass]="[icons.destroyCircle, icons.large3x]" class="alert-danger"
- aria-hidden="true"></i>
- </td>
- <td class="error-panel-alert-title">
- {{ title }}
- </td>
- </tr>
- <tr>
- <td class="error-panel-alert-text">
- <ng-content></ng-content>
- </td>
- </tr>
- </table>
-</alert>
-
-<div class="button-group text-right"
- *ngIf="backAction.observers.length > 0">
- <button class="btn btn-light tc_backButton"
- type="button"
- (click)="backAction.emit()"
- autofocus
- i18n>Back</button>
-</div>
+++ /dev/null
-.error-panel-alert-icon {
- vertical-align: top;
- padding-right: 15px; // See @alert-padding in bootstrap/less/variables.less
-}
-.error-panel-alert-title {
- font-weight: bold;
-}
+++ /dev/null
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AlertModule } from 'ngx-bootstrap/alert';
-
-import { configureTestBed } from '../../../../testing/unit-test-helper';
-import { ErrorPanelComponent } from './error-panel.component';
-
-describe('ErrorPanelComponent', () => {
- let component: ErrorPanelComponent;
- let fixture: ComponentFixture<ErrorPanelComponent>;
-
- configureTestBed({
- declarations: [ErrorPanelComponent],
- imports: [AlertModule.forRoot()]
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(ErrorPanelComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
+++ /dev/null
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Icons } from '../../../shared/enum/icons.enum';
-
-@Component({
- selector: 'cd-error-panel',
- templateUrl: './error-panel.component.html',
- styleUrls: ['./error-panel.component.scss']
-})
-export class ErrorPanelComponent {
- /**
- * The title to be displayed. Defaults to 'Error'.
- * @type {string}
- */
- @Input()
- title = 'Error';
-
- /**
- * The event that is triggered when the 'Back' button is pressed.
- * @type {EventEmitter<any>}
- */
- @Output()
- backAction = new EventEmitter();
-
- icons = Icons;
-}
<cd-loading-panel *ngIf="loading && grafanaExist"
i18n>Loading panel data...</cd-loading-panel>
-<cd-info-panel *ngIf="!grafanaExist"
- i18n>Please consult the
+<cd-alert-panel type="info"
+ *ngIf="!grafanaExist"
+ i18n>Please consult the
<a href="{{ docsUrl }}"
target="_blank">documentation</a> on how to
- configure and enable the monitoring functionality.</cd-info-panel>
+ configure and enable the monitoring functionality.</cd-alert-panel>
-<cd-info-panel *ngIf="!dashboardExist"
- i18n>Grafana Dashboard doesn't exist. Please refer to
+<cd-alert-panel type="info"
+ *ngIf="!dashboardExist"
+ i18n>Grafana Dashboard doesn't exist. Please refer to
<a href="{{ docsUrl }}"
target="_blank">documentation</a> on how to
- add dashboards to Grafana.</cd-info-panel>
+ add dashboards to Grafana.</cd-alert-panel>
<ng-container *ngIf="grafanaExist && dashboardExist">
<div class="row">
import { SummaryService } from '../../../shared/services/summary.service';
import { SettingsService } from '../../api/settings.service';
import { CephReleaseNamePipe } from '../../pipes/ceph-release-name.pipe';
-import { InfoPanelComponent } from '../info-panel/info-panel.component';
+import { AlertPanelComponent } from '../alert-panel/alert-panel.component';
import { LoadingPanelComponent } from '../loading-panel/loading-panel.component';
import { GrafanaComponent } from './grafana.component';
let fixture: ComponentFixture<GrafanaComponent>;
configureTestBed({
- declarations: [GrafanaComponent, InfoPanelComponent, LoadingPanelComponent],
+ declarations: [GrafanaComponent, AlertPanelComponent, LoadingPanelComponent],
imports: [AlertModule.forRoot(), HttpClientTestingModule, RouterTestingModule, FormsModule],
providers: [CephReleaseNamePipe, SettingsService, SummaryService, i18nProviders]
});
+++ /dev/null
-<alert type="info">
- <table>
- <tr>
- <td rowspan="2" class="info-panel-alert-icon">
- <i [ngClass]="[icons.infoCircle, icons.large3x]" class="alert-info"
- aria-hidden="true"></i>
- </td>
- <td class="info-panel-alert-title">
- {{ title }}
- </td>
- </tr>
- <tr>
- <td class="info-panel-alert-text">
- <ng-content></ng-content>
- </td>
- </tr>
- </table>
-</alert>
+++ /dev/null
-.info-panel-alert-icon {
- vertical-align: top;
- padding-right: 15px; // See @alert-padding in bootstrap/less/variables.less
-}
-.info-panel-alert-title {
- font-weight: bold;
-}
+++ /dev/null
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AlertModule } from 'ngx-bootstrap/alert';
-
-import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
-import { InfoPanelComponent } from './info-panel.component';
-
-describe('InfoPanelComponent', () => {
- let component: InfoPanelComponent;
- let fixture: ComponentFixture<InfoPanelComponent>;
-
- configureTestBed({
- declarations: [InfoPanelComponent],
- imports: [AlertModule.forRoot()],
- providers: i18nProviders
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(InfoPanelComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
+++ /dev/null
-import { Component, Input } from '@angular/core';
-
-import { I18n } from '@ngx-translate/i18n-polyfill';
-import { Icons } from '../../../shared/enum/icons.enum';
-
-@Component({
- selector: 'cd-info-panel',
- templateUrl: './info-panel.component.html',
- styleUrls: ['./info-panel.component.scss']
-})
-export class InfoPanelComponent {
- /**
- * The title to be displayed. Defaults to 'Information'.
- * @type {string}
- */
- @Input()
- title = this.i18n('Information');
-
- icons = Icons;
-
- constructor(private i18n: I18n) {}
-}
-<cd-info-panel *ngIf="status === vcs.ValueNone">
+<cd-alert-panel type="info"
+ *ngIf="status === vcs.ValueNone">
<ng-container i18n>Retrieving data<span *ngIf="statusFor"> for
<span [innerHtml]="statusFor"></span></span>. Please wait...</ng-container>
-</cd-info-panel>
+</cd-alert-panel>
-<cd-warning-panel *ngIf="status === vcs.ValueStale">
+<cd-alert-panel *ngIf="status === vcs.ValueStale"
+ type="warning">
<ng-container i18n>Displaying previously cached data<span *ngIf="statusFor">
for <span [innerHtml]="statusFor"></span></span>.</ng-container>
-</cd-warning-panel>
+</cd-alert-panel>
-<cd-error-panel *ngIf="status === vcs.ValueException">
+<cd-alert-panel type="error"
+ *ngIf="status === vcs.ValueException">
<ng-container i18n>Could not load data<span *ngIf="statusFor"> for
<span [innerHtml]="statusFor"></span></span>.
Please check the cluster health.</ng-container>
-</cd-error-panel>
+</cd-alert-panel>
import { AlertModule } from 'ngx-bootstrap/alert';
import { configureTestBed } from '../../../../testing/unit-test-helper';
-import { ErrorPanelComponent } from '../error-panel/error-panel.component';
-import { InfoPanelComponent } from '../info-panel/info-panel.component';
-import { WarningPanelComponent } from '../warning-panel/warning-panel.component';
+import { AlertPanelComponent } from '../alert-panel/alert-panel.component';
import { ViewCacheComponent } from './view-cache.component';
describe('ViewCacheComponent', () => {
let fixture: ComponentFixture<ViewCacheComponent>;
configureTestBed({
- declarations: [
- ErrorPanelComponent,
- InfoPanelComponent,
- ViewCacheComponent,
- WarningPanelComponent
- ],
+ declarations: [ViewCacheComponent, AlertPanelComponent],
imports: [AlertModule.forRoot()]
});
import { Component, Input, OnInit } from '@angular/core';
-import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum';
+import { ViewCacheStatus } from '../../enum/view-cache-status.enum';
@Component({
selector: 'cd-view-cache',
+++ /dev/null
-<alert type="warning">
- <table>
- <tr>
- <td rowspan="2" class="warning-panel-alert-icon">
- <i [ngClass]="[icons.large3x, icons.warning]" class="alert-warning"
- aria-hidden="true"></i>
- </td>
- <td class="warning-panel-alert-title">
- {{ title }}
- </td>
- </tr>
- <tr>
- <td class="warning-panel-alert-text">
- <ng-content></ng-content>
- </td>
- </tr>
- </table>
-</alert>
+++ /dev/null
-.warning-panel-alert-icon {
- vertical-align: top;
- padding-right: 15px; // See @alert-padding in bootstrap/less/variables.less
-}
-.warning-panel-alert-title {
- font-weight: bold;
-}
-.warning-panel-alert-text {
-}
+++ /dev/null
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AlertModule } from 'ngx-bootstrap/alert';
-
-import { configureTestBed } from '../../../../testing/unit-test-helper';
-import { WarningPanelComponent } from './warning-panel.component';
-
-describe('WarningPanelComponent', () => {
- let component: WarningPanelComponent;
- let fixture: ComponentFixture<WarningPanelComponent>;
-
- configureTestBed({
- declarations: [WarningPanelComponent],
- imports: [AlertModule.forRoot()]
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(WarningPanelComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
+++ /dev/null
-import { Component, Input } from '@angular/core';
-import { Icons } from '../../../shared/enum/icons.enum';
-
-@Component({
- selector: 'cd-warning-panel',
- templateUrl: './warning-panel.component.html',
- styleUrls: ['./warning-panel.component.scss']
-})
-export class WarningPanelComponent {
- /**
- * The title to be displayed. Defaults to 'Warning'.
- * @type {string}
- */
- @Input()
- title = 'Warning';
-
- icons = Icons;
-}
-<cd-error-panel *ngIf="loadingError"
- i18n>Failed to load data.</cd-error-panel>
+<cd-alert-panel type="error"
+ *ngIf="loadingError"
+ i18n>Failed to load data.</cd-alert-panel>
<div class="dataTables_wrapper">
<div class="dataTables_header clearfix"
projects / ceph.git / commitdiff