Skip to content

Commit 90b53c2

Browse files
author
Naman Munet
committed
mgr/dashboard: add reusable carbon popover
https://tracker.ceph.com/issues/72002 Signed-off-by: Naman Munet <[email protected]>
1 parent 6a24529 commit 90b53c2

File tree

11 files changed

+137
-59
lines changed

11 files changed

+137
-59
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,9 @@ <h5>{{ version }}</h5>
5858
</i>
5959
</div>
6060
<div cdsToggletipContent>
61-
<cd-health-checks [healthData]="healthData.health.checks"></cd-health-checks>
61+
<div class="cds--popover-scroll-container">
62+
<cd-health-checks [healthData]="healthData.health.checks"></cd-health-checks>
63+
</div>
6264
</div>
6365
</cds-toggletip>
6466
</ng-template>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -167,9 +167,11 @@
167167
</div>
168168
<div cdsToggletipContent
169169
#healthCheck>
170-
<cd-health-checks *ngIf="healthData?.health?.checks"
171-
[healthData]="healthData.health.checks">
172-
</cd-health-checks>
170+
<div class="cds--popover-scroll-container">
171+
<cd-health-checks *ngIf="healthData?.health?.checks"
172+
[healthData]="healthData.health.checks">
173+
</cd-health-checks>
174+
</div>
173175
</div>
174176
</cds-toggletip>
175177
</div>

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@
2828
</span>
2929
</div>
3030
<div cdsToggletipContent>
31-
<cd-health-checks [healthData]="healthData"></cd-health-checks>
31+
<div class="cds--popover-scroll-container">
32+
<cd-health-checks [healthData]="healthData"></cd-health-checks>
33+
</div>
3234
</div>
3335
</cds-toggletip>
3436
</ng-container>
@@ -161,12 +163,14 @@
161163
</cd-health-pie>
162164
</div>
163165
<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>
166+
<div class="cds--popover-scroll-container">
167+
<ng-container *ngTemplateOutlet="logsLink"></ng-container>
168+
<ul>
169+
<li *ngFor="let pgStatesText of healthData.pg_info.statuses | keyvalue">
170+
{{ pgStatesText.key }}: {{ pgStatesText.value }}
171+
</li>
172+
</ul>
173+
</div>
170174
</cds-popover-content>
171175
</div>
172176
</cd-info-card>

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,24 @@
2525
</li>
2626
</div>
2727
<div cdsToggletipContent>
28-
<ul class="text-center">
29-
<li><h5><b i18n>Sync Status:</b></h5></li>
30-
<li *ngFor="let status of zone.fullSyncStatus">
31-
<span *ngIf="!status?.includes(zone.name) && !status?.includes(zone.syncstatus) && !status?.includes('failed') && !status?.includes('error')">
32-
<span *ngIf="status?.includes(':')">
33-
<b>{{ status.split(': ')[0] | titlecase }}</b>:{{ status.split(': ')[1] | titlecase}}
28+
<div class="cds--popover-scroll-container">
29+
<ul class="text-center">
30+
<li><h5><b i18n>Sync Status:</b></h5></li>
31+
<li *ngFor="let status of zone.fullSyncStatus">
32+
<span *ngIf="!status?.includes(zone.name) && !status?.includes(zone.syncstatus) && !status?.includes('failed') && !status?.includes('error')">
33+
<span *ngIf="status?.includes(':')">
34+
<b>{{ status.split(': ')[0] | titlecase }}</b>:{{ status.split(': ')[1] | titlecase}}
35+
</span>
36+
<span *ngIf="!status?.includes(':')">
37+
<b>{{ status | titlecase }}</b>
38+
</span>
3439
</span>
35-
<span *ngIf="!status?.includes(':')">
36-
<b>{{ status | titlecase }}</b>
40+
<span *ngIf="status?.includes('failed') || status?.includes('error')">
41+
{{ status | titlecase }}
3742
</span>
38-
</span>
39-
<span *ngIf="status?.includes('failed') || status?.includes('error')">
40-
{{ status | titlecase }}
41-
</span>
42-
</li>
43-
</ul>
43+
</li>
44+
</ul>
45+
</div>
4446
</div>
4547
</cds-toggletip>
4648
<li class="mt-4 fw-bold"

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,24 @@
3333
</li>
3434
</div>
3535
<div cdsToggletipContent>
36-
<ul class="text-center">
37-
<li><h5><b i18n>Metadata Sync Status:</b></h5></li>
38-
<li *ngFor="let status of metadataSyncInfo.fullSyncStatus">
39-
<span *ngIf="!status?.includes(metadataSyncInfo.syncstatus) && !status?.includes('failed') && !status?.includes('error')">
40-
<span *ngIf="status?.includes(':')">
41-
<b>{{ status.split(':')[0] | titlecase }}</b>:{{ status.split(':')[1] | titlecase}}
36+
<div class="cds--popover-scroll-container">
37+
<ul class="text-center">
38+
<li><h5><b i18n>Metadata Sync Status:</b></h5></li>
39+
<li *ngFor="let status of metadataSyncInfo.fullSyncStatus">
40+
<span *ngIf="!status?.includes(metadataSyncInfo.syncstatus) && !status?.includes('failed') && !status?.includes('error')">
41+
<span *ngIf="status?.includes(':')">
42+
<b>{{ status.split(':')[0] | titlecase }}</b>:{{ status.split(':')[1] | titlecase}}
43+
</span>
44+
<span *ngIf="!status?.includes(':')">
45+
<b>{{ status | titlecase }}</b>
46+
</span>
4247
</span>
43-
<span *ngIf="!status?.includes(':')">
44-
<b>{{ status | titlecase }}</b>
48+
<span *ngIf="status?.includes('failed') || status?.includes('error')">
49+
{{ status | titlecase }}
4550
</span>
46-
</span>
47-
<span *ngIf="status?.includes('failed') || status?.includes('error')">
48-
{{ status | titlecase }}
49-
</span>
50-
</li>
51-
</ul>
51+
</li>
52+
</ul>
53+
</div>
5254
</div>
5355
</cds-toggletip>
5456
<li class="mt-4 fw-bold"

‎src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ import {
3838
ProgressIndicatorModule,
3939
PanelModule,
4040
LayoutModule,
41-
TilesModule
41+
TilesModule,
42+
PopoverModule
4243
} from 'carbon-components-angular';
4344
import EditIcon from '@carbon/icons/es/edit/20';
4445
import CodeIcon from '@carbon/icons/es/code/16';
@@ -138,7 +139,8 @@ import CloseIcon from '@carbon/icons/es/close/16';
138139
PanelModule,
139140
ChartsModule,
140141
LayoutModule,
141-
TilesModule
142+
TilesModule,
143+
PopoverModule
142144
],
143145
declarations: [
144146
SparklineComponent,

‎src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,42 @@
1-
<ng-template #popoverTpl>
2-
<div [class]="class"
3-
[innerHtml]="html">
1+
<ng-template #tooltipTemplate>
2+
<div class="cds--popover-scroll-container">
3+
<div [class]="class"
4+
[innerHtml]="html">
5+
</div>
6+
<ng-container *ngTemplateOutlet="content"></ng-container>
47
</div>
5-
<ng-content></ng-content>
68
</ng-template>
9+
@if (type === helperType.tooltip) {
10+
<cds-tooltip [description]="tooltipTemplate"
11+
[autoAlign]="true">
12+
<svg [cdsIcon]="iconType"
13+
[size]="iconSize"></svg>
14+
</cds-tooltip>
15+
} @else {
16+
<div class="inline-block"
17+
[ngClass]="class">
18+
<div
19+
cdsPopover
20+
[isOpen]="isPopoverOpen"
21+
[autoAlign]="true"
22+
(click)="togglePopover()"
23+
(keydown.enter)="togglePopover()"
24+
tabindex="0">
25+
<div class="popover-trigger">
26+
<svg
27+
[cdsIcon]="iconType"
28+
[size]="iconSize"></svg>
29+
</div>
30+
<cds-popover-content>
31+
<div class="cds--popover-scroll-container"
32+
(click)="$event.stopPropagation()">
33+
<ng-container *ngTemplateOutlet="content"></ng-container>
34+
</div>
35+
</cds-popover-content>
36+
</div>
37+
</div>
38+
}
739

8-
<cds-tooltip [description]="popoverTpl"
9-
[autoAlign]="true">
10-
<svg cdsIcon="information"
11-
size="16"
12-
title="info"></svg>
13-
</cds-tooltip>
40+
<ng-template #content>
41+
<ng-content></ng-content>
42+
</ng-template>

‎src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
cds-tooltip {
22
margin-left: 5px;
33
}
4+
5+
.inline-block {
6+
display: inline-block;
7+
}

‎src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.ts‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
11
import { Component, Input } from '@angular/core';
2+
import { Icons } from '../../enum/icons.enum';
3+
import { HelperType } from '../../enum/cd-helper.enum';
24

35
@Component({
46
selector: 'cd-helper',
57
templateUrl: './helper.component.html',
68
styleUrls: ['./helper.component.scss']
79
})
810
export class HelperComponent {
9-
@Input()
10-
class: string;
11+
icons = Icons;
12+
isPopoverOpen = false;
13+
helperType = HelperType;
1114

12-
@Input()
13-
iconClass = '';
15+
// Tooltip: Displayed on hover or focus and contains contextual, helpful, and nonessential information.
16+
// Popover: Displayed on click and can contain varying text and interactive elements
17+
@Input() type: HelperType.tooltip | HelperType.popover = HelperType.tooltip; // Default to tooltip for backward compatibility
18+
@Input() class: string;
19+
@Input() html: any;
20+
@Input() iconSize = this.icons.size16;
21+
@Input() iconType = this.icons.info;
1422

15-
@Input()
16-
html: any;
23+
togglePopover() {
24+
this.isPopoverOpen = !this.isPopoverOpen;
25+
}
26+
27+
closePopover() {
28+
if (this.type === HelperType.popover && this.isPopoverOpen) {
29+
this.isPopoverOpen = false;
30+
}
31+
}
1732
}

‎src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cd-helper.enum.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export enum HelperType {
2+
popover = 'popover',
3+
tooltip = 'tooltip'
4+
}

0 commit comments

Comments
 (0)