From 85ccbf64bb9045583cbc834ac3ac313f417410e2 Mon Sep 17 00:00:00 2001 From: Prachi Goel Date: Wed, 16 Oct 2024 14:44:46 +0530 Subject: [PATCH] mgr/dashboard: replace ngb-popover with carbon popover Fixes: https://tracker.ceph.com/issues/68259 Signed-off-by: Prachi Goel 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 --- .../src/app/ceph/cluster/cluster.module.ts | 10 +- .../cluster/upgrade/upgrade.component.html | 24 +++-- .../ceph/dashboard-v3/dashboard-v3.module.ts | 7 +- .../dashboard/dashboard-v3.component.html | 40 ++++---- .../app/ceph/dashboard/dashboard.module.ts | 7 +- .../dashboard/health/health.component.html | 68 ++++++++------ .../ceph/dashboard/health/health.component.ts | 2 - .../rgw-sync-data-info.component.html | 88 +++++++++--------- .../rgw-sync-data-info.component.scss | 4 + .../rgw-sync-data-info.component.ts | 3 +- .../rgw-sync-metadata-info.component.html | 91 ++++++++++--------- .../rgw-sync-metadata-info.component.scss | 4 + .../rgw-sync-metadata-info.component.ts | 2 +- .../frontend/src/app/ceph/rgw/rgw.module.ts | 7 +- .../frontend/src/styles/_carbon-defaults.scss | 21 +++-- 15 files changed, 208 insertions(+), 170 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts index bb07cbd6a15..ff1eeb904f2 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts @@ -13,7 +13,8 @@ import { InputModule, ModalModule, TreeviewModule, - ListModule + ListModule, + ToggletipModule } from 'carbon-components-angular'; import { @@ -108,10 +109,10 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta ButtonModule, InputModule, ModalModule, - ListModule + ListModule, + ToggletipModule ], declarations: [ - HostsComponent, MonitorComponent, ConfigurationComponent, OsdListComponent, @@ -155,7 +156,8 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta MultiClusterComponent, MultiClusterFormComponent, MultiClusterListComponent, - MultiClusterDetailsComponent + MultiClusterDetailsComponent, + HostsComponent ], providers: [NgbActiveModal] }) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html index 3e7f7a2c090..85a7333437e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html @@ -46,18 +46,22 @@ i18n-aria-label id="clusterStatus">
- - - -
+ +
{{ healthData.health.status | healthLabel | uppercase }} - -
+ + +
+
+ +
+ +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-v3.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-v3.module.ts index d437855b8fd..6c47a8b7ebf 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-v3.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-v3.module.ts @@ -3,7 +3,7 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; -import { NgbNavModule, NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; +import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; import { provideCharts, withDefaultRegisterables, BaseChartDirective } from 'ng2-charts'; import { SimplebarAngularModule } from 'simplebar-angular'; @@ -14,6 +14,7 @@ import { DashboardPieComponent } from './dashboard-pie/dashboard-pie.component'; import { DashboardTimeSelectorComponent } from './dashboard-time-selector/dashboard-time-selector.component'; import { DashboardV3Component } from './dashboard/dashboard-v3.component'; import { PgSummaryPipe } from './pg-summary.pipe'; +import { ToggletipModule } from 'carbon-components-angular'; @NgModule({ imports: [ @@ -22,12 +23,12 @@ import { PgSummaryPipe } from './pg-summary.pipe'; NgbNavModule, SharedModule, RouterModule, - NgbPopoverModule, NgbTooltipModule, FormsModule, ReactiveFormsModule, SimplebarAngularModule, - BaseChartDirective + BaseChartDirective, + ToggletipModule ], declarations: [ DashboardV3Component, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html index 6f5c535fd8d..baa80cb41eb 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html @@ -147,29 +147,33 @@
- - - -
- + + + Cluster + +
Cluster - Cluster + i18n>Cluster +
-
+
+ + +
+ +
+
- - - - -
- {{ healthData?.health?.status | healthLabel | uppercase }} - -
+ *ngIf="healthData.health?.status"> + + +
+ + {{ healthData.health.status | healthLabel | uppercase }} + + +
+
+ +
+
@@ -145,22 +148,26 @@ i18n-cardTitle class="cd-capacity-card cd-chart-card" contentClass="content-chart" - *ngIf="healthData?.pg_info"> - - -
    -
  • - {{ pgStatesText.key }}: {{ pgStatesText.value }} -
    • -
- -
-
- - + *ngIf="healthData.pg_info"> +
+ +
+ +
+ + +
    +
  • + {{ pgStatesText.key }}: {{ pgStatesText.value }} +
    • +
+
@@ -227,7 +234,10 @@

See Logs for more details.

+ i18n> + See + Logs for more details. +

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts index 722886d4477..fac206be59c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts @@ -33,10 +33,8 @@ export class HealthComponent implements OnInit, OnDestroy { enabledFeature$: FeatureTogglesMap$; icons = Icons; color: string; - clientStatsConfig: any = {}; rawCapacityChartConfig: any = {}; - pgStatusChartConfig = { options: { events: [''] diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html index e8c7f9fe47b..970a4d90a40 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html @@ -1,50 +1,50 @@ - -
    -
  • Sync Status:
    • -
  • - - - {{ status.split(': ')[0] | titlecase }}:{{ status.split(': ')[1] | titlecase}} - - - {{ status | titlecase }} - - - - {{ status | titlecase }} - -
    • -
-
+
+
    +
  • Sync Status:
    • +
  • + + + {{ status.split(': ')[0] | titlecase }}:{{ status.split(': ')[1] | titlecase}} + + + {{ status | titlecase }} + + + + {{ status | titlecase }} + +
    • +
+
+ +
  • + Last Synced:
  • {{ zone.timestamp | relativeDate }}
    • diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.scss index 4386b0c6157..6fb7fee71f2 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.scss @@ -6,3 +6,7 @@ ul { flex-direction: column; list-style-type: none; } + +.toggle-tip-btn { + flex-direction: column; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.ts index a7ec87da079..799d4211066 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.ts @@ -8,9 +8,8 @@ import { Icons } from '~/app/shared/enum/icons.enum'; }) export class RgwSyncDataInfoComponent { icons = Icons; - + align = 'top'; @Input() zone: any = {}; - constructor() {} } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html index 9b489e124bf..5ec927071f8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html @@ -1,57 +1,58 @@
      -
    • Status:
      • +
    • Status:
    • No Sync
     - -
      -
    • Metadata Sync Status:
      • -
    • - - - {{ status.split(':')[0] | titlecase }}:{{ status.split(':')[1] | titlecase}} - - - {{ status | titlecase }} - - - - {{ status | titlecase }} - -
      • -
    -
    +
    +
      +
    • Metadata Sync Status:
      • +
    • + + + {{ status.split(':')[0] | titlecase }}:{{ status.split(':')[1] | titlecase}} + + + {{ status | titlecase }} + + + + {{ status | titlecase }} + +
      • +
    +
    + +
  • + Last Synced:
  • {{ metadataSyncInfo.timestamp | relativeDate }}
    • diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.scss index 4386b0c6157..91dc6e03739 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.scss @@ -6,3 +6,7 @@ ul { flex-direction: column; list-style-type: none; } + +.toggleTipBtn { + flex-direction: column; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.ts index bf05c194a39..8df99b9c50e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.ts @@ -8,7 +8,7 @@ import { Icons } from '~/app/shared/enum/icons.enum'; }) export class RgwSyncMetadataInfoComponent { icons = Icons; - + align = 'top'; @Input() metadataSyncInfo: any = {}; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts index f65ca55cb76..be3b4d56c35 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts @@ -83,7 +83,8 @@ import { AccordionModule, TagModule, TooltipModule, - ComboBoxModule + ComboBoxModule, + ToggletipModule } from 'carbon-components-angular'; import { CephSharedModule } from '../shared/ceph-shared.module'; import { RgwUserAccountsComponent } from './rgw-user-accounts/rgw-user-accounts.component'; @@ -130,10 +131,10 @@ import { RgwRateLimitDetailsComponent } from './rgw-rate-limit-details/rgw-rate- RadioModule, TagModule, TooltipModule, - ComboBoxModule + ComboBoxModule, + ToggletipModule ], exports: [ - RgwDaemonListComponent, RgwDaemonDetailsComponent, RgwBucketFormComponent, RgwBucketListComponent, diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss index 2d99c77bd80..1282af5daa0 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss @@ -3,6 +3,7 @@ $flex-grid-columns: 16, $use-flexbox-grid: true, ); +@use '@carbon/layout'; @use '@carbon/colors'; @use './src/styles/vendor/variables' as vv; @use './themes/default'; @@ -18,14 +19,14 @@ ******************************************/ @use '@carbon/styles/scss/components/button/tokens' as button-tokens with ( - $button-primary: vv.$primary, - $button-primary-hover: darken(vv.$primary, 5%), + $button-primary: vv.$primary, + $button-primary-hover: darken(vv.$primary, 5%), $button-primary-active: darken(vv.$primary, 10%), - $button-secondary: vv.$secondary, - $button-secondary-hover: darken(vv.$secondary, 5%), + $button-secondary: vv.$secondary, + $button-secondary-hover: darken(vv.$secondary, 5%), $button-secondary-active: darken(vv.$secondary, 10%), - $button-tertiary: vv.$primary, - $button-tertiary-hover: darken(vv.$primary, 5%), + $button-tertiary: vv.$primary, + $button-tertiary-hover: darken(vv.$primary, 5%), $button-tertiary-active: darken(vv.$primary, 10%) ); @@ -156,3 +157,11 @@ Tooltip .cds--tooltip-content { background-color: theme.$layer-02; } +/****************************************** +Carbon Popover +******************************************/ +.cds--popover-content { + background-color: theme.$layer-02; + max-height: layout.$spacing-13; + overflow: auto; +} -- 2.39.5