Fix tooltips messages in the graphs at DR Policy dashboard

https://bugzilla.redhat.com/show_bug.cgi?id=2239093 https://bugzilla.redhat.com/show_bug.cgi?id=2239096 https://bugzilla.redhat.com/show_bug.cgi?id=2239101 Signed-off-by: Timothy Asir Jeyasingh <[email protected]>
red-hat-storage · Oct 3, 2023 · 3dc217c · 3dc217c
1 parent 4f5269c
commit 3dc217c
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 9 deletions.
diff --git a/locales/en/plugin__odf-console.json b/locales/en/plugin__odf-console.json
@@ -62,6 +62,7 @@
   "Loading Empty Page": "Loading Empty Page",
   "You are not authorized to complete this action. See your cluster administrator for role-based access control information.": "You are not authorized to complete this action. See your cluster administrator for role-based access control information.",
   "Not Authorized": "Not Authorized",
+  "<0>Note:</0> Alerts are deployed for both <2>ApplicationsSet</2> and <5>Subscription</5> type applications.": "<0>Note:</0> Alerts are deployed for both <2>ApplicationsSet</2> and <5>Subscription</5> type applications.",
   "{{ currentStatus }} to {{ preferredCluster }}": "{{ currentStatus }} to {{ preferredCluster }}",
   "{{ currentStatus }} to {{ failoverCluster }}": "{{ currentStatus }} to {{ failoverCluster }}",
   "Unknown": "Unknown",
@@ -90,9 +91,9 @@
   "Min value: ": "Min value: ",
   "Utilization": "Utilization",
   "Snapshots synced": "Snapshots synced",
-  "The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.": "The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.",
+  "<0>This graph provides an overview of the total number of snapshots synced across your clusters.</0><1>Note: Only inbound values are displayed exclusively for block volumes (ceph rbd) and include snapshots from all applications excluding apps using file voluems (cephfs).</1>": "<0>This graph provides an overview of the total number of snapshots synced across your clusters.</0><1>Note: Only inbound values are displayed exclusively for block volumes (ceph rbd) and include snapshots from all applications excluding apps using file voluems (cephfs).</1>",
   "Replication throughput": "Replication throughput",
-  "The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.": "The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.",
+  "<0>This graph provides an overview of the replication throughput for the cluster i.e, rate at which data is replicated within the cluster.</0><1>Note: Only inbound values are displayed exclusively for block volumes (ceph rbd) and include snapshots from all applications excluding apps using file voluems (cephfs).</1>": "<0>This graph provides an overview of the replication throughput for the cluster i.e, rate at which data is replicated within the cluster.</0><1>Note: Only inbound values are displayed exclusively for block volumes (ceph rbd) and include snapshots from all applications excluding apps using file voluems (cephfs).</1>",
   "Volume replication health": "Volume replication health",
   "Volumes": "Volumes",
   "Cluster: {{clusterName}}": "Cluster: {{clusterName}}",
@@ -103,6 +104,7 @@
   "Cluster operator": "Cluster operator",
   "{{ healthy }} healthy": "{{ healthy }} healthy",
   "{{ issues }} with issues": "{{ issues }} with issues",
+  "<0>Note:</0> The applications count displayed herein pertain exclusively to <2>ApplicationsSet</2> type applications.": "<0>Note:</0> The applications count displayed herein pertain exclusively to <2>ApplicationsSet</2> type applications.",
   "{{ protected }} DR protected": "{{ protected }} DR protected",
   "Systems": "Systems",
   "Storage System status": "Storage System status",

diff --git a/packages/mco/components/mco-dashboard/data-policy/alert-card/alert-card.tsx b/packages/mco/components/mco-dashboard/data-policy/alert-card/alert-card.tsx
@@ -2,12 +2,15 @@ import * as React from 'react';
 import { filterDRAlerts } from '@odf/mco/utils';
 import AlertsPanel from '@odf/shared/alert/AlertsPanel';
 import useAlerts from '@odf/shared/monitoring/useAlert';
+import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
+import { Trans } from 'react-i18next';
 import { Card, CardBody } from '@patternfly/react-core';
 import AlertItem from './alert-item';
 import './alert-card.scss';
 
 export const AlertsCard: React.FC = () => {
   const [alerts, loaded, loadError] = useAlerts();
+  const { t } = useCustomTranslation();
 
   return (
     <Card data-test="alerts-card">
@@ -16,6 +19,12 @@ export const AlertsCard: React.FC = () => {
           alerts={alerts}
           AlertItemComponent={AlertItem}
           alertsFilter={filterDRAlerts}
+          titleToolTip={
+            <Trans t={t}>
+              <b>Note:</b> Alerts are deployed for both <b>ApplicationsSet</b>{' '}
+              and <b>Subscription</b> type applications.
+            </Trans>
+          }
           loaded={loaded}
           loadError={loadError}
         />

diff --git a/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster.tsx b/packages/mco/components/mco-dashboard/data-policy/cluster-app-card/cluster.tsx
@@ -45,6 +45,7 @@ import {
   Humanize,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { UtilizationDurationDropdown } from '@openshift-console/dynamic-plugin-sdk-internal';
+import { Trans } from 'react-i18next';
 import { Flex, Text, TextVariants } from '@patternfly/react-core';
 import { ConnectedIcon } from '@patternfly/react-icons';
 import { StatusText } from './common';
@@ -356,9 +357,19 @@ export const UtilizationCard: React.FC<UtilizationCardProps> = ({
           clusters={peerClusters}
           title={t('Snapshots synced')}
           queryType={DRDashboard.RBD_SNAPSHOT_SNAPSHOTS}
-          titleToolTip={t(
-            'The y-axis shows the number of snapshots taken. It represents the rate of difference in snapshot creation count during a failover.'
-          )}
+          titleToolTip={
+            <Trans t={t}>
+              <p>
+                This graph provides an overview of the total number of snapshots
+                synced across your clusters.
+              </p>
+              <p className="odf-dashboard-body">
+                Note: Only inbound values are displayed exclusively for block
+                volumes (ceph rbd) and include snapshots from all applications
+                excluding apps using file voluems (cephfs).
+              </p>
+            </Trans>
+          }
           humanizeValue={humanizeNumber}
         />
       </div>
@@ -368,9 +379,20 @@ export const UtilizationCard: React.FC<UtilizationCardProps> = ({
           title={t('Replication throughput')}
           queryType={DRDashboard.RBD_SNAPSHOTS_SYNC_BYTES}
           humanizeValue={humanizeDecimalBytesPerSec}
-          titleToolTip={t(
-            'The y-axis shows the average throughput for syncing snapshot bytes from the primary to the secondary cluster.'
-          )}
+          titleToolTip={
+            <Trans t={t}>
+              <p>
+                This graph provides an overview of the replication throughput
+                for the cluster i.e, rate at which data is replicated within the
+                cluster.
+              </p>
+              <p className="odf-dashboard-body">
+                Note: Only inbound values are displayed exclusively for block
+                volumes (ceph rbd) and include snapshots from all applications
+                excluding apps using file voluems (cephfs).
+              </p>
+            </Trans>
+          }
           CustomUtilizationSummary={CustomUtilizationSummary}
         />
       </div>
@@ -414,7 +436,7 @@ type SnapshotUtilizationCardProps = {
   humanizeValue: Humanize;
   chartLabel?: string;
   clusters?: string[];
-  titleToolTip: string;
+  titleToolTip: JSX.Element;
   CustomUtilizationSummary?: React.FC<CustomUtilizationSummaryProps>;
 };
 

diff --git a/packages/mco/components/mco-dashboard/data-policy/summary-card/summary-card.tsx b/packages/mco/components/mco-dashboard/data-policy/summary-card/summary-card.tsx
@@ -3,9 +3,11 @@ import { MANAGED_CLUSTER_CONDITION_AVAILABLE } from '@odf/mco/constants';
 import { DrClusterAppsMap } from '@odf/mco/types';
 import { getManagedClusterCondition } from '@odf/mco/utils';
 import HealthItem from '@odf/shared/dashboards/status-card/HealthItem';
+import { FieldLevelHelp } from '@odf/shared/generic';
 import { DataUnavailableError } from '@odf/shared/generic/Error';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { HealthState } from '@openshift-console/dynamic-plugin-sdk';
+import { Trans } from 'react-i18next';
 import {
   Card,
   CardBody,
@@ -105,6 +107,12 @@ export const SummaryCard: React.FC = () => {
             <GalleryItem className="mco-dashboard__contentColumn">
               <Text className="text-muted mco-dashboard__statusText--margin mco-dashboard__statusText--size">
                 {t('Applications')}
+                <FieldLevelHelp>
+                  <Trans t={t}>
+                    <b>Note:</b> The applications count displayed herein pertain
+                    exclusively to <b>ApplicationsSet</b> type applications.
+                  </Trans>
+                </FieldLevelHelp>
               </Text>
               <Text className="mco-dashboard__statusText--margin mco-summary__countText--size mco-dashboard__statusText--weight">
                 {summaryMap.applications.totalCount}

diff --git a/packages/shared/src/alert/AlertsPanel.tsx b/packages/shared/src/alert/AlertsPanel.tsx
@@ -27,6 +27,7 @@ import {
 import { Divider } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons';
 import './alerts.scss';
+import { FieldLevelHelp } from '../generic';
 
 type AlertBadgeProps = {
   alerts: Alert[];
@@ -135,6 +136,7 @@ type AlertsProps = {
   alertsFilter?: (alert: Alert) => boolean;
   className?: string;
   AlertItemComponent?: React.FC<React.ComponentProps<typeof AlertItem>>;
+  titleToolTip?: JSX.Element | string;
   loaded: boolean;
   loadError: object;
 };
@@ -144,6 +146,7 @@ const AlertsPanel: React.FC<AlertsProps> = ({
   alertsFilter,
   className,
   AlertItemComponent,
+  titleToolTip,
   loaded,
   loadError,
 }) => {
@@ -182,6 +185,7 @@ const AlertsPanel: React.FC<AlertsProps> = ({
     >
       <Title headingLevel="h3">
         {t('Alerts')} ({filteredAlerts.length})
+        {!!titleToolTip && <FieldLevelHelp>{titleToolTip}</FieldLevelHelp>}
       </Title>
       <>
         <Divider className="odf-alerts-panel__divider" />