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
Signed-off-by: Waad Alkhoury <walkhour@redhat.com>
(cherry picked from commit 527d912b878087672ab537b59e3addf35108a77c)

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 7a801ecf87ebfbc57382e260d4f6c1bb7461451c..481ae18dc782af3ab189041cd147165f2e4a000c 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
@@ -2,8 +2,8 @@
            type="warning"
            *ngIf="displayNotification"
            (close)="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>
+  <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>
 </ngb-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 e6af78a6271c8070670814efec98c751dfe8e11b..569f1e0c4a4a98eacd95954641b8f21197738a3d 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 @@
+@use './src/styles/vendor/variables' as vv;
+
 ::ng-deep cd-telemetry-notification .no-margin-bottom {
   margin-bottom: 0;
 }
+
+.activate-button {
+  background-color: vv.$barley-white;
+  border: vv.$gray-700 solid 0.5px;
+  border-radius: 10%;
+  padding: 0.1rem 0.4rem;
+}
+
+.activate-text {
+  color: vv.$gray-700;
+  font-weight: bold;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
index 676b0cae770ecba7ecb31e737cdfb8f2806e2b16..b1a386a803ad88e82286e79555aeefe9f9ff9210 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
@@ -22,6 +22,7 @@ $yellow: #ffc200 !default;
 $green: #0b0 !default;
 $teal: #20c997 !default;
 $cyan: #17a2b8 !default;
+$barley-white: #fcecba !default;
 
 $primary: #2b99a8 !default;
 $secondary: #374249 !default;