mgr/dashboard: improve telemetry opt-in reminder notification message

Added activition button and linked the word telemetry to telemetry documentation

Fixes: https://tracker.ceph.com/issues/49606
(cherry picked from commit 527d912b878087672ab537b59e3addf35108a77c)
Signed-off-by: Waad Alkhoury <walkhour@redhat.com>

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 eb3186781e121b265b71209d3fff024981c2ead8..474493cc991b76398562f10efcf357924d04c431 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,10 +1,10 @@
 <alert class="no-margin-bottom"
        type="warning"
        *ngIf="displayNotification"
-       [dismissible]="true"
-       (onClose)="close($event)">
-  <div i18n>The Telemetry module is not submitting telemetry data at the
-    moment. Click
-  <a routerLink="/telemetry"
-     class="alert-link">here</a> to activate it now.</div>
+       (close)="close($event)">
+  <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>
 </alert>
+

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 6862c2f557438337830b21812a35df293a1c7295..3f30ac79c7fa1eaac36ad8e373f2dc844b52c1eb 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
@@ -1,3 +1,17 @@
-::ng-deep .no-margin-bottom {
+@import 'defaults';
+
+::ng-deep cd-telemetry-notification .no-margin-bottom {
   margin-bottom: 0;
 }
+
+.activate-button {
+  background-color: $color-barley-white;
+  border: $gray-700 solid 0.5px;
+  border-radius: 10%;
+  padding: 0.1rem 0.4rem;
+}
+
+.activate-text {
+  color: $gray-700;
+  font-weight: bold;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
index cbae2bb1fd5afb724a725aa06f3280482e6fb7ed..f4a9a6134bbfabffc63873104f0e332c7ba923a0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
@@ -4,6 +4,7 @@
 
 // Bootstrap defaults
 
+$gray-700: #495057 !default;
 $gray-900: #212529 !default;
 
 $screen-sm-min: 576px !default;
@@ -19,6 +20,7 @@ $screen-lg-max: calc(#{$screen-xl-min} - 1px);
 $color-solid-red: #ff0000 !default;
 $color-pink: #a94442 !default;
 $color-light-red: #f2dede !default;
+$color-barley-white: #fcecba !default;
 
 // $color-orange: #ff6600 !default;