mgr/dashboard: Drop support for older version of dashboard

Fixes https://tracker.ceph.com/issues/72739

- remove the code for previous version of dashboard
- popover css was globally added in infocard component which needs to be removed now. So include css in respective components- dashboard and upgrade.

Signed-off-by: Afreen Misbah <[email protected]>

Author: afreen23

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

@@ -0,0 +1,14 @@
+@use './src/styles/vendor/variables' as vv;
+
+.info-card-content-clickable {
+  border: 1px solid vv.$gray-200;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 1.25em;
+  padding: 7px;
+}
+
+.info-card-content-clickable:hover {
+  background-color: vv.$gray-200;
+  border-color: vv.$gray-400;
+}

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

@@ -1,3 +1,5 @@
+@use './src/styles/vendor/variables' as vv;
+
 .details {
   font-size: larger;
 
@@ -31,3 +33,44 @@
     white-space: normal;
   }
 }
+
+.info-card-popover-cluster-status {
+  max-height: 20vh;
+  max-width: 23vw;
+
+  .popover-body {
+    font-size: 1rem;
+    max-height: 19vh;
+    max-width: 100%;
+    overflow: auto;
+
+    li {
+      span {
+        font-size: 1.1em;
+        font-weight: bold;
+      }
+
+      span.health-warn-description {
+        color: vv.$health-color-warning-800 !important;
+      }
+    }
+  }
+}
+
+@media (max-width: vv.$screen-lg-max) {
+  .info-card-popover-cluster-status {
+    max-width: 31vw;
+  }
+}
+
+@media (max-width: vv.$screen-md-max) {
+  .info-card-popover-cluster-status {
+    max-width: 46vw;
+  }
+}
+
+@media (max-width: vv.$screen-sm-max) {
+  .info-card-popover-cluster-status {
+    max-width: 83vw;
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts

@@ -12,13 +12,6 @@ import { CephSharedModule } from '../shared/ceph-shared.module';
 import { FeedbackComponent } from '../shared/feedback/feedback.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HealthPieComponent } from './health-pie/health-pie.component';
-import { HealthComponent } from './health/health.component';
-import { InfoCardComponent } from './info-card/info-card.component';
-import { InfoGroupComponent } from './info-group/info-group.component';
-import { MdsDashboardSummaryPipe } from './mds-dashboard-summary.pipe';
-import { MgrDashboardSummaryPipe } from './mgr-dashboard-summary.pipe';
-import { MonSummaryPipe } from './mon-summary.pipe';
-import { osdDashboardSummaryPipe } from './osd-dashboard-summary.pipe';
 import { ToggletipModule } from 'carbon-components-angular';
 
 @NgModule({
@@ -34,18 +27,7 @@ import { ToggletipModule } from 'carbon-components-angular';
     BaseChartDirective,
     ToggletipModule
   ],
-  declarations: [
-    HealthComponent,
-    DashboardComponent,
-    MonSummaryPipe,
-    osdDashboardSummaryPipe,
-    MgrDashboardSummaryPipe,
-    MdsDashboardSummaryPipe,
-    HealthPieComponent,
-    InfoCardComponent,
-    InfoGroupComponent,
-    FeedbackComponent
-  ],
+  declarations: [DashboardComponent, HealthPieComponent, FeedbackComponent],
   providers: [provideCharts(withDefaultRegisterables())]
 })
 export class DashboardModule {}

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

@@ -2,14 +2,7 @@
   <a href="#main"
      class="sr-only">skip to content</a>
 
-  <ng-container *ngIf="(enabledFeature$ | async)?.dashboard === false; else dashboardV3"
-                class="main-padding">
-    <cd-refresh-selector></cd-refresh-selector>
-
-    <cd-health id="main"></cd-health>
-  </ng-container>
-
-  <ng-template #dashboardV3>
+  <ng-container class="main-padding">
     <cd-dashboard-v3></cd-dashboard-v3>
-  </ng-template>
+  </ng-container>
 </main>

src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.scss

@@ -1,3 +0,0 @@
-main:has(cd-health) {
-  padding-top: 20px;
-}

src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.ts

@@ -1,16 +1,8 @@
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { FeatureTogglesService } from '~/app/shared/services/feature-toggles.service';
 
 @Component({
   selector: 'cd-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
-export class DashboardComponent {
-  enabledFeature$: Observable<Object>;
-
-  constructor(private featureToggles: FeatureTogglesService) {
-    this.enabledFeature$ = this.featureToggles.get();
-  }
-}
+export class DashboardComponent {}