From: Waad Alkhoury <walkhour@redhat.com>
Date: Tue, 30 Mar 2021 06:38:01 +0000 (+0200)
Subject: mgr/dashboard: improve telemetry opt-in reminder notification message
X-Git-Tag: v15.2.13~10^2~2^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=ac99f9707cad9e8e97b4901aa2a1ccbbfc8a2da1;p=ceph.git

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 eb3186781e1..474493cc991 100644
--- 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 6862c2f5574..3f30ac79c7f 100644
--- 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 cbae2bb1fd5..f4a9a6134bb 100644
--- 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;