.overview-alerts-card {
&-badge {
- display: inline-flex;
align-items: center;
+ display: inline-flex;
padding-right: var(--cds-spacing-04);
}
}
&-need-attention {
+ color: var(--cds-text-secondary);
display: block;
margin-top: var(--cds-spacing-02);
- 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%;
+ min-block-size: 0;
}
&-badge cd-icon svg {
.overview-health-card {
&-header {
- display: flex;
align-items: end;
+ display: flex;
}
// CSS for status text, modifier names match icons name
&-status--success {
border-block-end: 2px solid var(--cds-border-interactive) !important;
.cds--definition-term {
- color: var(--cds-text-primary) !important;
border-block-end: 0 !important;
+ color: var(--cds-text-primary) !important;
}
}
}
&-resiliency-chart-text {
- width: 13rem;
margin-left: var(--cds-spacing-04);
+ width: 13rem;
}
&-icon-and-text {
- display: inline-flex;
align-items: center;
+ display: inline-flex;
gap: var(--cds-spacing-03);
}
&-hardware-sections {
+ box-sizing: border-box;
+ column-gap: var(--cds-spacing-03);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
- column-gap: var(--cds-spacing-03);
- width: 100%;
margin-top: var(--cds-spacing-03);
padding-right: var(--cds-spacing-06);
- box-sizing: border-box;
+ width: 100%;
}
&-hardware-section {
+ border-right: 1px solid var(--cds-border-subtle);
+ box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--cds-spacing-03);
min-width: 0;
padding-inline-end: var(--cds-spacing-03);
- border-right: 1px solid var(--cds-border-subtle);
- box-sizing: border-box;
}
&-hardware-section:last-child {
+ /* stylelint-disable-next-line declaration-property-value-disallowed-list */
border-right: none;
padding-inline-end: 0;
}
&-hardware-row {
- display: flex;
align-items: center;
- justify-content: space-between;
+ display: flex;
gap: var(--cds-spacing-03);
+ justify-content: space-between;
min-width: 0;
}
&-hardware-status {
- display: inline-flex;
align-items: center;
- gap: var(--cds-spacing-03);
+ display: inline-flex;
flex-shrink: 0;
+ gap: var(--cds-spacing-03);
}
// Overrides
}
.cds--definition-term {
- color: var(--cds-link-primary);
border-block-end: 1px dotted var(--cds-link-primary);
+ color: var(--cds-link-primary);
}
&-icon-and-text cd-icon svg {
.overview {
&-check-header {
- display: flex;
align-items: center;
+ display: flex;
gap: var(--cds-spacing-02);
margin-bottom: var(--cds-spacing-02);
}
}
&-pg-side-panel-rw {
- padding: var(--cds-spacing-04);
background-color: var(--cds-layer-01);
+ padding: var(--cds-spacing-04);
width: 100%;
}
import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { OverviewStorageService } from '~/app/shared/api/storage-overview.service';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'cd-overview-alerts-card',
+ standalone: true,
+ template: ''
+})
+class MockOverviewAlertsCardComponent {}
describe('OverviewComponent', () => {
let component: OverviewComponent;
{ provide: MgrModuleService, useValue: mockMgrModuleService },
{ provide: HardwareService, useValue: mockHardwareService }
]
- }).compileComponents();
+ })
+ .overrideComponent(OverviewComponent, {
+ remove: {
+ imports: [OverviewAlertsCardComponent]
+ },
+ add: {
+ imports: [MockOverviewAlertsCardComponent]
+ }
+ })
+ .compileComponents();
fixture = TestBed.createComponent(OverviewComponent);
component = fixture.componentInstance;
.overview-storage-card {
&-dropdown {
+ align-items: flex-end;
display: flex;
justify-content: flex-end;
- align-items: flex-end;
.cds--label {
padding-right: var(--cds-spacing-03);
}
.cds--tag--gray {
+ /* stylelint-disable-next-line sh-waqar/declaration-use-variable */
background-color: #fddc69;
color: var(--cds-text-secondary);
}
import CloseIcon from '@carbon/icons/es/close/16';
-
@NgModule({
imports: [
CommonModule,
@use '@carbon/styles/scss/spacing';
.notification-header {
- position: sticky;
- top: 0;
- z-index: 2;
- padding: spacing.$spacing-03 spacing.$spacing-05;
background-color: var(--cds-layer-01);
border-block-end: 1px solid var(--cds-border-subtle-01);
- inset-block-start: 0;
height: var(--header-height);
+ inset-block-start: 0;
+ padding: spacing.$spacing-03 spacing.$spacing-05;
+ position: sticky;
+ top: 0;
+ z-index: 2;
&__title {
margin-top: 0.4rem;
&__dismiss-btn {
color: var(--cds-text-primary);
- padding-top: 0;
padding-left: spacing.$spacing-06;
+ padding-top: 0;
}
&__heading-and-button {
// Main container
.notifications-page__container {
- padding-top: var(--cds-spacing-05);
background-color: var(--cds-layer-01);
column-gap: 1rem;
+ padding-top: var(--cds-spacing-05);
}
// Notifications list
// Notification item content
.notification-item-content {
.notification-title {
- margin: 0 0 var(--cds-spacing-02) 0;
+ color: var(--cds-text-primary);
font-size: var(--cds-productive-heading-compact-01-font-size);
- line-height: var(--cds-productive-heading-compact-01-line-height);
font-weight: var(--cds-productive-heading-compact-01-font-weight);
- color: var(--cds-text-primary);
+ line-height: var(--cds-productive-heading-compact-01-line-height);
+ margin: 0 0 var(--cds-spacing-02) 0;
}
.notification-meta {
// Empty state
.empty-state {
- text-align: center;
color: var(--cds-text-secondary);
margin-top: var(--cds-spacing-05);
+ text-align: center;
p {
- margin: var(--cds-spacing-03) 0 0 0;
font-size: var(--cds-body-01-font-size);
line-height: var(--cds-body-01-line-height);
+ margin: var(--cds-spacing-03) 0 0 0;
}
}
// No selection state
.no-selection-state {
- text-align: center;
color: var(--cds-text-secondary);
margin-top: var(--cds-spacing-06);
+ text-align: center;
p {
- margin: var(--cds-spacing-03) 0 0 0;
font-size: var(--cds-body-01-font-size);
line-height: var(--cds-body-01-line-height);
+ margin: var(--cds-spacing-03) 0 0 0;
}
}
// Notification details
.notification-details {
- padding: var(--cds-spacing-05);
- border-radius: var(--cds-border-radius);
background-color: var(--cds-layer-01);
+ border-radius: var(--cds-border-radius);
+ padding: var(--cds-spacing-05);
}
// Details list
border-bottom: 1px solid var(--cds-border-subtle);
&:last-child {
+ /* stylelint-disable-next-line declaration-property-value-disallowed-list */
border-bottom: none;
}
.detail-label {
color: var(--cds-text-secondary);
- font-weight: var(--cds-font-weight-semibold);
font-size: var(--cds-body-compact-01-font-size);
+ font-weight: var(--cds-font-weight-semibold);
}
cds-list-column:last-child {
// Message content
.message-content {
- margin: 0;
- padding: var(--cds-spacing-04);
background-color: var(--cds-layer-02);
- border-radius: var(--cds-border-radius);
border-left: 3px solid var(--cds-support-info);
+ border-radius: var(--cds-border-radius);
+ color: var(--cds-text-primary);
font-size: var(--cds-body-compact-01-font-size);
line-height: var(--cds-body-compact-01-line-height);
- color: var(--cds-text-primary);
+ margin: 0;
+ padding: var(--cds-spacing-04);
}
// Timestamp
// Typography
h3 {
+ color: var(--cds-text-primary);
font-size: var(--cds-productive-heading-03-font-size);
- line-height: var(--cds-productive-heading-03-line-height);
font-weight: var(--cds-productive-heading-03-font-weight);
- color: var(--cds-text-primary);
+ line-height: var(--cds-productive-heading-03-line-height);
margin-bottom: var(--cds-spacing-05);
}
p {
+ color: var(--cds-text-primary);
font-size: var(--cds-body-01-font-size);
line-height: var(--cds-body-01-line-height);
- color: var(--cds-text-primary);
}
// Spacing utilities
return this.prom.getPrometheusQueryData({ params: this.RAW_USED_BY_STORAGE_TYPE_QUERY });
}
- getThresholdStatus(total: number, used: number, nearfull: number, full: number): CapacityThreshold {
+ getThresholdStatus(
+ total: number,
+ used: number,
+ nearfull: number,
+ full: number
+ ): CapacityThreshold {
if (!used || !total || !nearfull || !full) {
return null;
}
}
.chart-subheading {
- margin-top: var(--cds-spacing-02);
color: var(--cds-text-secondary);
+ margin-top: var(--cds-spacing-02);
}
.performance-card-wrapper {
.overview-storage-card-dropdown {
+ align-items: flex-end;
display: flex;
justify-content: flex-end;
- align-items: flex-end;
.cds--label {
padding-right: var(--cds-spacing-03);
.performance-card-empty-msg {
display: flex;
flex-direction: column;
- justify-content: flex-end;
gap: var(--cds-spacing-05);
height: 350px;
+ justify-content: flex-end;
p {
font-size: 12px !important;
}
img {
- width: 100px !important;
height: 100px !important;
+ width: 100px !important;
}
}
.performance-card-latency-chart {
- margin-right: 10px;
margin-left: 10px;
+ margin-right: 10px;
}
}
padding: 0;
&-header {
- margin: 0;
- padding: var(--cds-spacing-05);
+ align-items: end;
display: flex;
justify-content: space-between;
- align-items: end;
+ margin: 0;
+ padding: var(--cds-spacing-05);
}
&-section {
}
.cds--header-panel--expanded {
- max-inline-size: 100%;
- overflow: hidden;
display: grid;
grid-template-rows: auto 1fr auto;
+ max-inline-size: 100%;
+ overflow: hidden;
}
.panel-header {
}
.panel-footer {
+ border-top: 1px solid theme.$border-subtle-02;
display: flex;
justify-content: flex-end;
- border-top: 1px solid theme.$border-subtle-02;
}
}
.timepicker {
&-dropdown {
+ align-items: flex-end;
display: flex;
justify-content: flex-end;
- align-items: flex-end;
.cds--label {
padding-right: var(--cds-spacing-03);
::ng-deep .cds--dropdown {
flex: 0 0 40%;
- width: 100% !important;
min-width: 170px;
+ width: 100% !important;
}
}
}
items:
type: integer
type: array
- required: &id054
+ required:
- num_mons
- quorum
type: object
recovering_bytes_per_sec:
description: Total recovery in bytes
type: integer
- required: &id058
+ required:
- pgs_by_state
- num_pools
- num_pgs
- num_hosts
- num_hosts_available
type: object
- application/vnd.ceph.api.v1.0+json:
- schema:
- properties:
- fsid:
- description: Cluster filesystem ID
- type: string
- fsmap:
- description: Filesystem map details
- properties:
- num_active:
- description: Number of active mds
- type: integer
- num_standbys:
- description: Standby MDS count
- type: integer
- required: *id048
- type: object
- health:
- description: Cluster health overview
- properties:
- checks:
- description: Health checks keyed by name
- properties:
- <check_name>:
- description: Individual health check object
- properties:
- muted:
- description: Whether the check is muted
- type: boolean
- severity:
- description: Health severity level
- type: string
- summary:
- description: Summary details
- properties:
- count:
- description: Occurrence count
- type: integer
- message:
- description: Human-readable summary
- type: string
- required: *id049
- type: object
- required: *id050
- type: object
- required: *id051
- type: object
- mutes:
- description: List of muted check names
- items:
- type: string
- type: array
- status:
- description: Overall health status
- type: string
- required: *id052
- type: object
- mgrmap:
- description: Manager map details
- properties:
- num_active:
- description: Number of active managers
- type: integer
- num_standbys:
- description: Standby manager count
- type: integer
- required: *id053
- type: object
- monmap:
- description: Monitor map details
- properties:
- num_mons:
- description: Number of monitors
- type: integer
- quorum:
- description: List of monitors in quorum
- items:
- type: integer
- type: array
- required: *id054
- type: object
- num_hosts:
- description: Count of hosts
- type: integer
- num_hosts_available:
- description: Count of available hosts
- type: integer
- num_iscsi_gateways:
- description: Iscsi gateways status
- properties:
- down:
- description: Count of iSCSI gateways not running
- type: integer
- up:
- description: Count of iSCSI gateways running
- type: integer
- required: *id055
- type: object
- num_rgw_gateways:
- description: Count of RGW gateway daemons running
- type: integer
- osdmap:
- description: OSD map details
- properties:
- in:
- description: Number of OSDs in
- type: integer
- num_osds:
- description: Total OSD count
- type: integer
- up:
- description: Number of OSDs up
- type: integer
- required: *id056
- type: object
- pgmap:
- description: Placement group map details
- properties:
- bytes_total:
- description: Total capacity in bytes
- type: integer
- bytes_used:
- description: Used capacity in bytes
- type: integer
- num_pgs:
- description: Total PG count
- type: integer
- num_pools:
- description: Number of pools
- type: integer
- pgs_by_state:
- description: List of PG counts by state
- items:
- properties:
- count:
- description: Count of PGs in this state
- type: integer
- state_name:
- description: Placement group state
- type: string
- required: *id057
- type: object
- type: array
- recovering_bytes_per_sec:
- description: Total recovery in bytes
- type: integer
- required: *id058
- type: object
- required: *id059
- type: object
description: OK
'400':
description: Operation exception. Please check the response body for details.