mgr/dashboard: carbonize breadcrums

Fixes: https://tracker.ceph.com/issues/67231
Signed-off-by: Nizamudeen A <nia@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.html
index 05232b7fa07554c80e98fb1134b5179990d40d8a..8789aca1f53b2242da07588886e47a41b98d9c91 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.html
@@ -1,11 +1,13 @@
-<ol *ngIf="crumbs.length"
-    class="breadcrumb">
-  <li *ngFor="let crumb of crumbs; let last = last"
-      [ngClass]="{ 'active': last && finished }"
-      class="breadcrumb-item">
-    <a *ngIf="!last && crumb.path !== null"
-       [routerLink]="crumb.path"
-       preserveFragment>{{ crumb.text }}</a>
-    <span *ngIf="last || crumb.path === null">{{ crumb.text }}</span>
-  </li>
-</ol>
+<cds-breadcrumb [noTrailingSlash]="true"
+                *ngIf="crumbs.length">
+  <ng-container *ngFor="let crumb of crumbs; let last = last">
+    <cds-breadcrumb-item *ngIf="!last && crumb.path !== null"
+                         href="#/{{ crumb.path }}">
+      {{ crumb.text }}
+    </cds-breadcrumb-item>
+
+    <cds-breadcrumb-item *ngIf="last || crumb.path === null">
+      {{ crumb.text }}
+    </cds-breadcrumb-item>
+  </ng-container>
+</cds-breadcrumb>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
index 733f7e67771c1666bb5a92d112633b72a2e45472..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
@@ -1,12 +0,0 @@
-.breadcrumb {
-  background-color: transparent;
-  border-radius: 0;
-  margin-top: 8px;
-  padding: 8px 0;
-}
-
-.breadcrumb > li + li::before {
-  content: '\f101';
-  font-family: 'ForkAwesome';
-  padding: 0 5px 0 7px;
-}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
index 958dfb4c00ab663c020639ff056952e2f1c24012..d5bc8bc936a4a5d843b87e3a8acae16c33589ff6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
@@ -10,7 +10,8 @@ import {
   IconModule,
   ThemeModule,
   DialogModule,
-  GridModule
+  GridModule,
+  BreadcrumbModule
 } from 'carbon-components-angular';
 
 import { AppRoutingModule } from '~/app/app-routing.module';
@@ -56,7 +57,8 @@ import LogoutIcon from '@carbon/icons/es/logout/16';
     IconModule,
     ThemeModule,
     DialogModule,
-    GridModule
+    GridModule,
+    BreadcrumbModule
   ],
   declarations: [
     AboutComponent,