implemented telemetry-notification notification component

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 5dded9bbf81cb1af30ddd6e8701ec9e1f209be5b..6e2d072976cd6202d4ca7062a41d2d4c8d137505 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -15,7 +15,7 @@ import {
 import { ClickOutsideModule } from 'ng-click-outside';
 import { NgChartsModule } from 'ng2-charts';
 import { SimplebarAngularModule } from 'simplebar-angular';
-import { UIShellModule, ButtonModule } from 'carbon-components-angular';
+import { UIShellModule, ButtonModule, NotificationModule } from 'carbon-components-angular';
 
 import { MotdComponent } from '~/app/shared/components/motd/motd.component';
 import { DirectivesModule } from '../directives/directives.module';
@@ -79,7 +79,8 @@ import { UpgradableComponent } from './upgradable/upgradable.component';
     NgbDatepickerModule,
     NgbTimepickerModule,
     UIShellModule,
-    ButtonModule
+    ButtonModule,
+    NotificationModule,
   ],
   declarations: [
     SparklineComponent,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.html
index 9af7958370a79d6f167dc362b1720b8f7bcd06f0..50e2070207199bcb0cbec2c936172c7264156954 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.html
@@ -1,12 +1,22 @@
-<cd-alert-panel *ngIf="displayNotification"
-                class="no-margin-bottom"
-                [showTitle]="false"
-                size="slim"
-                [type]="notificationSeverity"
-                [dismissible]="notificationSeverity !== 'danger'"
-                (dismissed)="onDismissed()">
-  <div i18n>The Ceph community needs your help to continue improving: please
-    <a routerLink="/telemetry"
-       class="btn activate-button alert-link activate-text">Activate</a> the
-  <a href="https://docs.ceph.com/en/latest/mgr/telemetry/">Telemetry</a> module.</div>
-</cd-alert-panel>
+<cds-actionable-notification
+class="telemetry-notification"
+  [notificationObj]="{
+            type: notificationSeverity,
+            template: customActionableContent,
+            actionsTemplate: customActionableTrigger,
+            showClose: notificationSeverity !== 'danger'
+        }"
+></cds-actionable-notification>
+
+<ng-template #customActionableContent let-data>
+  <p cdsActionableTitle i18n>Telemetry</p>
+  <p cdsActionableSubtitle i18n>The Ceph community needs your help to continue improving</p>
+  <p cdsToastCaption i18n>Please activate the
+    <a href="https://docs.ceph.com/en/latest/mgr/telemetry/">Telemetry</a> module.</p>
+</ng-template>
+
+<ng-template #customActionableTrigger>
+  <a routerLink="/telemetry">
+    <button cdsActionableButton cdsButton="ghost" size="sm" i18n>Activate</button>
+  </a>
+</ng-template>
\ No newline at end of file

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss
index 1e1606724ca4cf08192af846711a5a1f0a9b4bc4..7d68755f42c63c1b5622e205e4674e9032c3b1ac 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss
@@ -21,3 +21,10 @@ a {
   color: darken(vv.$primary, 10);
   font-weight: bold;
 }
+
+.telemetry-notification {
+  z-index: 99999;
+  position: absolute;
+  bottom: 25px;
+  right: 25px;
+}