Skip to content

Commit 85ccbf6

Browse files
Prachi Goelprgoel-code
Prachi Goel
authored and
prgoel-code
committed
mgr/dashboard: replace ngb-popover with carbon popover
Fixes: https://tracker.ceph.com/issues/68259 Signed-off-by: Prachi Goel <[email protected]> Below are the changes from bootstrap popover to carbon popover: 1. Dashboard v3 2. Health Component 3. RGW sync data component 4. RGW sync metadata component 5. Upgrade component
1 parent 0e6ccd1 commit 85ccbf6

File tree

15 files changed

+208
-170
lines changed

15 files changed

+208
-170
lines changed

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import {
1313
InputModule,
1414
ModalModule,
1515
TreeviewModule,
16-
ListModule
16+
ListModule,
17+
ToggletipModule
1718
} from 'carbon-components-angular';
1819

1920
import {
@@ -108,10 +109,10 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
108109
ButtonModule,
109110
InputModule,
110111
ModalModule,
111-
ListModule
112+
ListModule,
113+
ToggletipModule
112114
],
113115
declarations: [
114-
HostsComponent,
115116
MonitorComponent,
116117
ConfigurationComponent,
117118
OsdListComponent,
@@ -155,7 +156,8 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
155156
MultiClusterComponent,
156157
MultiClusterFormComponent,
157158
MultiClusterListComponent,
158-
MultiClusterDetailsComponent
159+
MultiClusterDetailsComponent,
160+
HostsComponent
159161
],
160162
providers: [NgbActiveModal]
161163
})

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,22 @@ <h5>{{ version }}</h5>
4646
i18n-aria-label
4747
id="clusterStatus">
4848
<div class="d-flex flex-column justify-content-center align-items-center">
49-
<ng-template #healthChecks>
50-
<cd-health-checks [healthData]="healthData.health.checks"></cd-health-checks>
51-
</ng-template>
5249
<ng-template #healthWarningAndError>
53-
<div class="info-card-content-clickable mt-1"
54-
[ngStyle]="healthData.health.status | healthColor"
55-
[ngbPopover]="healthChecks"
56-
popoverClass="info-card-popover-cluster-status">
50+
<cds-toggletip [ngStyle]="healthData.health.status | healthColor"
51+
[dropShadow]="true"
52+
[autoAlign]="true"
53+
class="info-card-content-clickable mt-1">
54+
<div cdsToggletipButton>
5755
{{ healthData.health.status | healthLabel | uppercase }}
58-
<i *ngIf="healthData.health?.status !== 'HEALTH_OK'"
59-
class="fa fa-exclamation-triangle"></i>
60-
</div></ng-template>
56+
<i *ngIf="healthData.health?.status !== 'HEALTH_OK'"
57+
class="fa fa-exclamation-triangle">
58+
</i>
59+
</div>
60+
<div cdsToggletipContent>
61+
<cd-health-checks [healthData]="healthData.health.checks"></cd-health-checks>
62+
</div>
63+
</cds-toggletip>
64+
</ng-template>
6165

6266
<ng-container *ngIf="!healthData.health?.checks?.length; else healthWarningAndError">
6367
<div [ngStyle]="healthData.health.status | healthColor">

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-v3.module.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
33
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
44
import { RouterModule } from '@angular/router';
55

6-
import { NgbNavModule, NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
6+
import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
77
import { provideCharts, withDefaultRegisterables, BaseChartDirective } from 'ng2-charts';
88
import { SimplebarAngularModule } from 'simplebar-angular';
99

@@ -14,6 +14,7 @@ import { DashboardPieComponent } from './dashboard-pie/dashboard-pie.component';
1414
import { DashboardTimeSelectorComponent } from './dashboard-time-selector/dashboard-time-selector.component';
1515
import { DashboardV3Component } from './dashboard/dashboard-v3.component';
1616
import { PgSummaryPipe } from './pg-summary.pipe';
17+
import { ToggletipModule } from 'carbon-components-angular';
1718

1819
@NgModule({
1920
imports: [
@@ -22,12 +23,12 @@ import { PgSummaryPipe } from './pg-summary.pipe';
2223
NgbNavModule,
2324
SharedModule,
2425
RouterModule,
25-
NgbPopoverModule,
2626
NgbTooltipModule,
2727
FormsModule,
2828
ReactiveFormsModule,
2929
SimplebarAngularModule,
30-
BaseChartDirective
30+
BaseChartDirective,
31+
ToggletipModule
3132
],
3233
declarations: [
3334
DashboardV3Component,

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -147,29 +147,33 @@
147147
</a>
148148
</div>
149149
<div class="d-flex flex-column ms-4 me-4 mt-4 mb-4">
150-
<ng-template #healthChecks>
151-
<cd-health-checks *ngIf="healthData?.health?.checks"
152-
[healthData]="healthData.health.checks"></cd-health-checks>
153-
</ng-template>
154-
155150
<div class="d-flex flex-row col-md-3 ms-4">
156-
<i *ngIf="healthData.health?.status"
157-
[ngClass]="[healthData.health.status | healthIcon, icons.large2x]"
158-
[ngStyle]="healthData.health.status | healthColor"
159-
[title]="healthData.health.status"></i>
151+
<i *ngIf="healthData.health?.status"
152+
[ngClass]="[healthData.health.status | healthIcon, icons.large2x]"
153+
[ngStyle]="healthData.health.status | healthColor"
154+
[title]="healthData.health.status">
155+
</i>
156+
<span class="ms-2 mt-n1 lead"
157+
*ngIf="!healthData.health?.checks?.length"
158+
i18n>Cluster</span>
159+
<cds-toggletip [dropShadow]="true"
160+
[autoAlign]="true">
161+
<div cdsToggletipButton>
160162
<a class="ms-2 mt-n1 lead text-primary"
161-
[ngbPopover]="healthChecks"
162163
popoverClass="info-card-popover-cluster-status"
163-
[openDelay]="300"
164-
[closeDelay]="500"
165-
triggers="mouseenter"
166164
*ngIf="healthData.health?.checks?.length"
167-
i18n>Cluster</a>
168-
<span class="ms-2 mt-n1 lead"
169-
*ngIf="!healthData.health?.checks?.length"
170-
i18n>Cluster</span>
165+
i18n>Cluster
166+
</a>
171167
</div>
172-
</div>
168+
<div cdsToggletipContent
169+
#healthCheck>
170+
<cd-health-checks *ngIf="healthData?.health?.checks"
171+
[healthData]="healthData.health.checks">
172+
</cd-health-checks>
173+
</div>
174+
</cds-toggletip>
175+
</div>
176+
</div>
173177

174178
<div class="d-flex flex-column col-md-3">
175179
<div *ngIf="hasHardwareError"

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
33
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
44
import { RouterModule } from '@angular/router';
55

6-
import { NgbNavModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
6+
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
77
import { provideCharts, withDefaultRegisterables, BaseChartDirective } from 'ng2-charts';
88

99
import { SharedModule } from '~/app/shared/shared.module';
@@ -19,6 +19,7 @@ import { MdsDashboardSummaryPipe } from './mds-dashboard-summary.pipe';
1919
import { MgrDashboardSummaryPipe } from './mgr-dashboard-summary.pipe';
2020
import { MonSummaryPipe } from './mon-summary.pipe';
2121
import { osdDashboardSummaryPipe } from './osd-dashboard-summary.pipe';
22+
import { ToggletipModule } from 'carbon-components-angular';
2223

2324
@NgModule({
2425
imports: [
@@ -27,11 +28,11 @@ import { osdDashboardSummaryPipe } from './osd-dashboard-summary.pipe';
2728
NgbNavModule,
2829
SharedModule,
2930
RouterModule,
30-
NgbPopoverModule,
3131
FormsModule,
3232
ReactiveFormsModule,
3333
DashboardV3Module,
34-
BaseChartDirective
34+
BaseChartDirective,
35+
ToggletipModule
3536
],
3637
declarations: [
3738
HealthComponent,

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html‎

Lines changed: 39 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,22 @@
1515
i18n-cardTitle
1616
class="cd-status-card"
1717
contentClass="content-highlight"
18-
*ngIf="healthData?.health?.status">
19-
<ng-container *ngIf="healthData?.health?.checks?.length > 0">
20-
<ng-template #healthChecks>
21-
<cd-health-checks [healthData]="healthData"></cd-health-checks>
22-
</ng-template>
23-
<div class="info-card-content-clickable"
24-
[ngStyle]="healthData?.health?.status | healthColor"
25-
[ngbPopover]="healthChecks"
26-
popoverClass="info-card-popover-cluster-status">
27-
{{ healthData?.health?.status | healthLabel | uppercase }}
28-
<i *ngIf="healthData?.health?.status !== 'HEALTH_OK'"
29-
class="fa fa-exclamation-triangle"></i>
30-
</div>
18+
*ngIf="healthData.health?.status">
19+
<ng-container *ngIf="healthData.health?.checks?.length > 0">
20+
<cds-toggletip [dropShadow]="true"
21+
[autoAlign]="true">
22+
<div cdsToggletipButton>
23+
<span [ngStyle]="healthData.health.status | healthColor"
24+
class="info-card-content-clickable">
25+
{{ healthData.health.status | healthLabel | uppercase }}
26+
<i *ngIf="healthData.health?.status !== 'HEALTH_OK'"
27+
class="fa fa-exclamation-triangle"></i>
28+
</span>
29+
</div>
30+
<div cdsToggletipContent>
31+
<cd-health-checks [healthData]="healthData"></cd-health-checks>
32+
</div>
33+
</cds-toggletip>
3134
</ng-container>
3235
<ng-container *ngIf="!healthData?.health?.checks?.length">
3336
<div [ngStyle]="healthData?.health.status | healthColor">
@@ -145,22 +148,26 @@
145148
i18n-cardTitle
146149
class="cd-capacity-card cd-chart-card"
147150
contentClass="content-chart"
148-
*ngIf="healthData?.pg_info">
149-
<ng-template #pgStatus>
150-
<ng-container *ngTemplateOutlet="logsLink"></ng-container>
151-
<ul>
152-
<li *ngFor="let pgStatesText of healthData?.pg_info.statuses | keyvalue">
153-
{{ pgStatesText.key }}: {{ pgStatesText.value }}
154-
</li>
155-
</ul>
156-
</ng-template>
157-
<div class="pg-status-popover-wrapper">
158-
<div [ngbPopover]="pgStatus">
159-
<cd-health-pie [data]="healthData"
160-
[config]="pgStatusChartConfig"
161-
(prepareFn)="preparePgStatus($event[0], $event[1])">
162-
</cd-health-pie>
151+
*ngIf="healthData.pg_info">
152+
<div cdsPopover
153+
[dropShadow]="true"
154+
placement="bottom"
155+
class="pg-status-popover-wrapper">
156+
157+
<div class="popover-trigger">
158+
<cd-health-pie [data]="healthData"
159+
[config]="pgStatusChartConfig"
160+
(prepareFn)="preparePgStatus($event[0], $event[1])">
161+
</cd-health-pie>
163162
</div>
163+
<cds-popover-content>
164+
<ng-container *ngTemplateOutlet="logsLink"></ng-container>
165+
<ul>
166+
<li *ngFor="let pgStatesText of healthData.pg_info.statuses | keyvalue">
167+
{{ pgStatesText.key }}: {{ pgStatesText.value }}
168+
</li>
169+
</ul>
170+
</cds-popover-content>
164171
</div>
165172
</cd-info-card>
166173

@@ -227,7 +234,10 @@
227234
<ng-template #logsLink>
228235
<ng-container *ngIf="permissions?.log?.read">
229236
<p class="logs-link"
230-
i18n><i [ngClass]="[icons.infoCircle]"></i> See <a routerLink="/logs">Logs</a> for more details.</p>
237+
i18n>
238+
<i [ngClass]="[icons.infoCircle]"></i> See
239+
<a routerLink="/logs">Logs</a> for more details.
240+
</p>
231241
</ng-container>
232242
</ng-template>
233243
</div>

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,8 @@ export class HealthComponent implements OnInit, OnDestroy {
3333
enabledFeature$: FeatureTogglesMap$;
3434
icons = Icons;
3535
color: string;
36-
3736
clientStatsConfig: any = {};
3837
rawCapacityChartConfig: any = {};
39-
4038
pgStatusChartConfig = {
4139
options: {
4240
events: ['']

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,50 @@
1-
<ng-template #syncPopover>
2-
<ul class="text-center">
3-
<li><h5><b>Sync Status:</b></h5></li>
4-
<li *ngFor="let status of zone.fullSyncStatus">
5-
<span *ngIf="!status?.includes(zone.name) && !status?.includes(zone.syncstatus) && !status?.includes('failed') && !status?.includes('error')">
6-
<span *ngIf="status?.includes(':')">
7-
<b>{{ status.split(': ')[0] | titlecase }}</b>:{{ status.split(': ')[1] | titlecase}}
8-
</span>
9-
<span *ngIf="!status?.includes(':')">
10-
<b>{{ status | titlecase }}</b>
11-
</span>
12-
</span>
13-
<span *ngIf="status?.includes('failed') || status?.includes('error')">
14-
{{ status | titlecase }}
15-
</span>
16-
</li>
17-
</ul>
18-
</ng-template>
191
<ul class="me-2">
202
<ng-template #upToDateTpl>
21-
<li class="badge badge-success">Up to Date</li>
22-
</ng-template>
23-
<ng-template #showStatus>
24-
<a *ngIf="zone.syncstatus !== 'Not Syncing From Zone'"
25-
class="lead text-primary"
26-
[ngbPopover]="syncPopover"
27-
placement="top"
28-
popoverClass="rgw-overview-card-popover"
29-
i18n>{{ zone.syncstatus | titlecase }}</a>
30-
<a *ngIf="zone.syncstatus === 'Not Syncing From Zone'"
31-
class="lead text-primary"
32-
[ngbPopover]="syncPopover"
33-
placement="top"
34-
popoverClass="rgw-overview-card-popover"
35-
i18n>Not Syncing</a>
3+
<li class="badge badge-success"
4+
i18n>Up to Date</li>
365
</ng-template>
37-
<li><b>Status:</b></li>
38-
<li *ngIf="zone.syncstatus?.includes('failed') || zone.syncstatus?.includes('error'); else showStatus">
39-
<i [ngClass]="[icons.danger]"
40-
class="text-danger"></i>
41-
<a class="lead text-danger"
42-
[ngbPopover]="syncPopover"
43-
placement="top"
44-
popoverClass="rgw-overview-card-popover"
45-
i18n>Error</a></li>
46-
<li class="mt-4 fw-bold">
47-
Last Synced:
6+
<cds-toggletip [dropShadow]="true"
7+
[align]="align">
8+
<div cdsToggletipButton
9+
class="toggleTipBtn">
10+
<ng-template #showStatus>
11+
<a *ngIf="zone.syncstatus !== 'Not Syncing From Zone'"
12+
class="lead text-primary"
13+
i18n>{{ zone.syncstatus | titlecase }}</a>
14+
<a *ngIf="zone.syncstatus === 'Not Syncing From Zone'"
15+
class="lead text-primary"
16+
i18n>Not Syncing</a>
17+
</ng-template>
18+
<li><b>Status:</b></li>
19+
<li *ngIf="zone.syncstatus?.includes('failed') || zone.syncstatus?.includes('error'); else showStatus">
20+
<i [ngClass]="[icons.danger]"
21+
class="text-danger"></i>
22+
<a class="lead text-danger"
23+
i18n>Error</a>
24+
</li>
25+
</div>
26+
<div cdsToggletipContent>
27+
<ul class="text-center">
28+
<li><h5><b i18n>Sync Status:</b></h5></li>
29+
<li *ngFor="let status of zone.fullSyncStatus">
30+
<span *ngIf="!status?.includes(zone.name) && !status?.includes(zone.syncstatus) && !status?.includes('failed') && !status?.includes('error')">
31+
<span *ngIf="status?.includes(':')">
32+
<b>{{ status.split(': ')[0] | titlecase }}</b>:{{ status.split(': ')[1] | titlecase}}
33+
</span>
34+
<span *ngIf="!status?.includes(':')">
35+
<b>{{ status | titlecase }}</b>
36+
</span>
37+
</span>
38+
<span *ngIf="status?.includes('failed') || status?.includes('error')">
39+
{{ status | titlecase }}
40+
</span>
41+
</li>
42+
</ul>
43+
</div>
44+
</cds-toggletip>
45+
<li class="mt-4 fw-bold"
46+
i18n>
47+
Last Synced:
4848
</li>
4949
<li class="badge badge-info"
5050
*ngIf="zone.timestamp; else upToDateTpl">{{ zone.timestamp | relativeDate }}</li>

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,7 @@ ul {
66
flex-direction: column;
77
list-style-type: none;
88
}
9+
10+
.toggle-tip-btn {
11+
flex-direction: column;
12+
}

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@ import { Icons } from '~/app/shared/enum/icons.enum';
88
})
99
export class RgwSyncDataInfoComponent {
1010
icons = Icons;
11-
11+
align = 'top';
1212
@Input()
1313
zone: any = {};
14-
1514
constructor() {}
1615
}

0 commit comments

Comments
 (0)