[YW][#5423] Fix Replication graph units and missing graph in Replicat…

…ion tab when metrics exist.

Summary:
Fix graph units for Replication lag to show microseconds due to incorrect handling on the
backend of dividing the units. Fix lodash access function to correct get the metric alias object.

Test Plan:
Go to Metrics tab and check the Replication lag for the cluster. Note the units displayed
on the graph. Then go to the Replication tab and confirm that the resource text and graph so
microseconds.

Example of correct metrics
{F13945}

Reviewers: rahuldesirazu, arnav, sshevchenko

Reviewed By: sshevchenko

Subscribers: jenkins-bot, ui

Differential Revision: https://phabricator.dev.yugabyte.com/D9174

managed/src/main/resources/metrics.yml

@@ -1927,8 +1927,8 @@ tserver_async_replication_lag_micros:
       type: "date"
     yaxis:
       alias:
-        "async_replication_sent_lag_micros": "Sent Lag (Milliseconds)"
-        "async_replication_committed_lag_micros": "Committed Lag (Milliseconds)"
+        "async_replication_sent_lag_micros": "Sent Lag (Microseconds)"
+        "async_replication_committed_lag_micros": "Committed Lag (Microseconds)"
 
 master_overall_rpc_rate:
   metric: "rpc_inbound_calls_created"

managed/ui/src/components/tables/Replication/Replication.js

@@ -15,6 +15,9 @@ import './Replication.scss';
 
 const GRAPH_TYPE = 'replication';
 const METRIC_NAME = 'tserver_async_replication_lag_micros';
+const MICROS_IN_MIN = 60000000.00;
+const MICROS_IN_SEC = 1000000.00;
+const MICROS_IN_MS = 1000.00;
 
 export default class ListBackups extends Component {
   static defaultProps = {
@@ -57,7 +60,7 @@ export default class ListBackups extends Component {
     let latestStat = null;
     let latestTimestamp = null;
     let showMetrics = false;
-    if (_.get(metrics, `metrics.${GRAPH_TYPE}.${METRIC_NAME}.layout.yaxis.alias`, null)) {
+    if (_.get(metrics, `${GRAPH_TYPE}.${METRIC_NAME}.layout.yaxis.alias`, null)) {
       // Get alias 
       const metricAliases = metrics[GRAPH_TYPE][METRIC_NAME].layout.yaxis.alias;
       const displayName = metricAliases['async_replication_committed_lag_micros']
@@ -80,13 +83,13 @@ export default class ListBackups extends Component {
           </div>
         </div>;
       }
-      let resourceNumber = <YBResourceCount size={latestStat} kind="&mu;s" inline={true} />;
-      if (latestStat > 60000000) {
-        resourceNumber = <YBResourceCount size={(latestStat / 60000000.00).toFixed(4)} kind="min" inline={true} />;
-      } else if (latestStat > 1000000) {
-        resourceNumber = <YBResourceCount size={(latestStat / 1000000.00).toFixed(4)} kind="s" inline={true} />;
-      } else if (latestStat > 1000) {
-        resourceNumber = <YBResourceCount size={latestStat / 1000.00} kind="ms" inline={true} />;
+      let resourceNumber = <YBResourceCount size={latestStat} kind="μs" inline={true} />;
+      if (latestStat > MICROS_IN_MIN) {
+        resourceNumber = <YBResourceCount size={(latestStat / MICROS_IN_MIN).toFixed(4)} kind="min" inline={true} />;
+      } else if (latestStat > MICROS_IN_SEC) {
+        resourceNumber = <YBResourceCount size={(latestStat / MICROS_IN_SEC).toFixed(4)} kind="s" inline={true} />;
+      } else if (latestStat > MICROS_IN_MS) {
+        resourceNumber = <YBResourceCount size={(latestStat / MICROS_IN_MS).toFixed(4)} kind="ms" inline={true} />;
       }
       recentStatBlock = <div className="metric-block">
         <h3>Current Replication Lag</h3>