From: Afreen Misbah Date: Mon, 23 Feb 2026 20:13:43 +0000 (+0530) Subject: mgr/dashboard: Added variations of alerts card sub total layout X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=0de754e7185c49e7b7bbc023d2368e8784445508;p=ceph.git mgr/dashboard: Added variations of alerts card sub total layout - when health card's tab closed the layout is compact - when health card's tab open the layout take space Signed-off-by: Afreen Misbah --- diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html index f500e96e45a..6b2e703292c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html @@ -1,5 +1,6 @@ @if (vm$ | async; as vm) { +

@@ -14,7 +15,7 @@ View all - +
{{ vm.total }} @@ -26,20 +27,26 @@ {{ vm.statusText }} +
@if (vm.badges.length) { -
- @for (b of vm.badges; track b.key; let first = $first) { +
+ @for (b of vm.badges; track b.key; let last = $last) { + [class.overview-alerts-card-badge-with-border--right]="!last && compact" + [class.overview-alerts-card-badge-with-border--bottom]="!compact"> + @if(compact) { {{ b.count }} + } @else { + {{b.key | upperFirst}} ({{ b.count }}) + } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss index 62b4b62aaee..39723dfcaaa 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss @@ -1,18 +1,17 @@ .overview-alerts-card { - // height: 100%; - &-badges { - display: flex; - align-items: center; - } - &-badge { display: inline-flex; align-items: center; + } + + &-badge-with-border--right { + border-right: 1px solid var(--cds-border-subtle); padding: 0 var(--cds-spacing-04); } - &-badge-with-border { - border-left: 1px solid var(--cds-border-subtle); + &-badge-with-border--bottom { + border-bottom: 1px solid var(--cds-border-subtle); + padding-bottom: var(--cds-spacing-03); } &-need-attention { @@ -21,8 +20,14 @@ color: var(--cds-text-secondary); } + // Override to make alert card take full available height. + // Carbon tiles set a min height of 4 rem which was causing alerts card not to stretch with its sibling card. .cds--tile { min-block-size: 0; height: 100%; } + + &-badge cd-icon svg { + display: block; + } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.spec.ts index 5606ffc1388..57462b52ac6 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.spec.ts @@ -109,13 +109,15 @@ describe('OverviewAlertsCardComponent', () => { fixture.detectChanges(); const badgeEls = Array.from( - fixture.nativeElement.querySelectorAll( - '.overview-alerts-card-badges .overview-alerts-card-badge' - ) + fixture.nativeElement.querySelectorAll('.overview-alerts-card-badge') ) as HTMLElement[]; expect(badgeEls.length).toBe(2); - expect(badgeEls[0].classList.contains('overview-alerts-card-badge-with-border')).toBe(false); - expect(badgeEls[1].classList.contains('overview-alerts-card-badge-with-border')).toBe(true); + expect(badgeEls[0].classList.contains('overview-alerts-card-badge-with-border--right')).toBe( + true + ); + expect(badgeEls[1].classList.contains('overview-alerts-card-badge-with-border--right')).toBe( + false + ); }); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.ts index 78c6e2d1939..bfd11fb5add 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.ts @@ -1,6 +1,7 @@ import { ChangeDetectionStrategy, Component, + Input, OnInit, ViewEncapsulation, inject @@ -9,11 +10,18 @@ import { CommonModule } from '@angular/common'; import { combineLatest } from 'rxjs'; import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service'; -import { ButtonModule, GridModule, LinkModule, TilesModule } from 'carbon-components-angular'; +import { + ButtonModule, + GridModule, + LayoutModule, + LinkModule, + TilesModule +} from 'carbon-components-angular'; import { RouterModule } from '@angular/router'; import { ProductiveCardComponent } from '~/app/shared/components/productive-card/productive-card.component'; import { ComponentsModule } from '~/app/shared/components/components.module'; import { map, shareReplay, startWith } from 'rxjs/operators'; +import { PipesModule } from '~/app/shared/pipes/pipes.module'; const AlertIcon = { error: 'error', @@ -32,7 +40,9 @@ const AlertIcon = { RouterModule, ProductiveCardComponent, ButtonModule, - LinkModule + LinkModule, + LayoutModule, + PipesModule ], templateUrl: './overview-alerts-card.component.html', styleUrl: './overview-alerts-card.component.scss', @@ -40,6 +50,7 @@ const AlertIcon = { encapsulation: ViewEncapsulation.None }) export class OverviewAlertsCardComponent implements OnInit { + @Input() compact = true; private readonly prometheusAlertService = inject(PrometheusAlertService); ngOnInit(): void { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.ts index 49372345ae1..bf1c855b25e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.ts @@ -26,15 +26,13 @@ import { PipesModule } from '~/app/shared/pipes/pipes.module'; import { UpgradeInfoInterface } from '~/app/shared/models/upgrade.interface'; import { UpgradeService } from '~/app/shared/api/upgrade.service'; import { catchError, filter, map, startWith } from 'rxjs/operators'; -import { HealthCardVM } from '~/app/shared/models/overview'; +import { HealthCardTabSection, HealthCardVM } from '~/app/shared/models/overview'; type OverviewHealthData = { summary: Summary; upgrade: UpgradeInfoInterface; }; -type TabSection = 'system' | 'hardware' | 'resiliency'; - interface HealthItemConfig { key: 'mon' | 'mgr' | 'osd' | 'hosts'; label: string; @@ -69,8 +67,9 @@ export class OverviewHealthCardComponent { @Input({ required: true }) vm!: HealthCardVM; @Output() viewIncidents = new EventEmitter(); + @Output() activeSectionChange = new EventEmitter(); - activeSection: TabSection | null = null; + activeSection: HealthCardTabSection | null = null; healthItems: HealthItemConfig[] = [ { key: 'mon', label: $localize`Monitor` }, { key: 'mgr', label: $localize`Manager` }, @@ -78,8 +77,9 @@ export class OverviewHealthCardComponent { { key: 'hosts', label: $localize`Nodes` } ]; - toggleSection(section: TabSection) { + toggleSection(section: HealthCardTabSection) { this.activeSection = this.activeSection === section ? null : section; + this.activeSectionChange.emit(this.activeSection); } readonly data$: Observable = combineLatest([ diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html index 1e7f9864170..0e912d2ef8a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html @@ -11,12 +11,13 @@
- +
@@ -45,7 +46,7 @@ (closed)="togglePanel()">
- Health incidents are Ceph health checks warnings indicating conditions that require attention and remain until resolved. + Health incidents are Ceph health checks warnings indicating conditions that require attention and remain until resolved.
@for (check of health?.checks; track key) { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.spec.ts index c7183146375..ec4e410bc3c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.spec.ts @@ -98,7 +98,7 @@ describe('OverviewComponent', () => { expect(vm.mon).toEqual( expect.objectContaining({ - value: '3/3', + value: 'Quorum: 3/3', severity: expect.any(String) }) ); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts index 1e7cb7da1d1..e2ab38b0201 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts @@ -9,6 +9,7 @@ import { RefreshIntervalService } from '~/app/shared/services/refresh-interval.s import { HealthCheck, HealthSnapshotMap } from '~/app/shared/models/health.interface'; import { HealthCardCheckVM, + HealthCardTabSection, HealthCardVM, HealthDisplayVM, HealthIconMap, @@ -131,6 +132,7 @@ export function buildHealthCardVM(d: HealthSnapshotMap): HealthCardVM { }) export class OverviewComponent { isHealthPanelOpen = false; + activeHealthTab: HealthCardTabSection | null = null; private readonly healthService = inject(HealthService); private readonly refreshIntervalService = inject(RefreshIntervalService); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/overview.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/overview.ts index 73212636396..3effe7d82c8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/overview.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/overview.ts @@ -72,3 +72,5 @@ export interface HealthCardVM { osd: HealthCardSubStateVM; hosts: HealthCardSubStateVM; } + +export type HealthCardTabSection = 'system' | 'hardware' | 'resiliency';