RANGER-3917 : Ranger UI should have the provision to display the audit metrics for each active plugin

security-admin/src/main/webapp/react-webapp/package.json

@@ -24,6 +24,7 @@
     "babel-loader": "^8.2.2",
     "bootstrap": "^5.3.2",
     "bootstrap-switch-button-react": "^1.2.0",
+    "chart.js": "^4.1.2",
     "classnames": "^2.3.1",
     "clipboard-polyfill": "^4.0.1",
     "create-react-class": "^15.7.0",
@@ -43,6 +44,7 @@
     "qs": "^6.15.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.0",
+    "react-chartjs-2": "^5.2.0",
     "react-datetime": "^3.2.0",
     "react-dom": "^18.2.0",
     "react-final-form": "^6.5.9",

security-admin/src/main/webapp/react-webapp/src/App.jsx

@@ -84,6 +84,7 @@ const PluginStatusLogs = lazy(
 const UserSyncLogs = lazy(
   () => import("Views/AuditEvent/UserSync/UserSyncLogs")
 );
+const MetricsLogs = lazy(() => import("Views/AuditEvent/Metrics/MetricsLogs"));
 const PolicyListingTabView = lazy(
   () => import("Views/PolicyListing/PolicyListingTabView")
 );
@@ -343,6 +344,7 @@ export default class App extends Component {
                     <Route path="agent" element={<PluginsLogs />} />
                     <Route path="pluginStatus" element={<PluginStatusLogs />} />
                     <Route path="userSync" element={<UserSyncLogs />} />
+                    <Route path="metric" element={<MetricsLogs />} />
                   </Route>
                   {/* AUDIT LOGS DETAILS VIEW */}
                   <Route

security-admin/src/main/webapp/react-webapp/src/styles/style.css

@@ -1996,6 +1996,13 @@ tbody.drag-drop-wrap > tr > td:hover:first-child:after {
   width: 6px;
 }
 
+.btn-default-selected {
+  color: #0b7fad;
+  border-color: #0b7fad;
+  background-color: #fff;
+  outline: none;
+}
+
 /* SideBar */
 .wrapper {
   display: flex;

security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js

@@ -657,7 +657,8 @@ export const PathAssociateWithModule = {
     "/reports/audit/agent",
     "/reports/audit/pluginStatus",
     "/reports/audit/userSync",
-    "/reports/audit/eventlog/:eventId"
+    "/reports/audit/eventlog/:eventId",
+    "/reports/audit/metric"
   ],
   "Security Zone": [
     "/zones/zone/list",

security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AuditLayout.jsx

@@ -88,8 +88,10 @@ class AuditLayout extends Component {
         this.props.location.pathname == "/reports/audit/pluginStatus"
       ) {
         activeTabVal = "pluginStatus";
-      } else {
+      } else if (this.props.location.pathname == "/reports/audit/userSync") {
         activeTabVal = "userSync";
+      } else {
+        activeTabVal = "metric";
       }
     }
     return activeTabVal;
@@ -112,6 +114,7 @@ class AuditLayout extends Component {
           <Tab eventKey="agent" title="Plugins" />
           <Tab eventKey="pluginStatus" title="Plugin Status" />
           <Tab eventKey="userSync" title="User Sync" />
+          <Tab eventKey="metric" title="Metrics" />
         </Tabs>
         <Outlet
           context={{

security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Metrics/MetricGraphs.jsx

@@ -0,0 +1,210 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, useEffect, useRef } from "react";
+import { fetchApi } from "Utils/fetchAPI";
+import { serverError } from "Utils/XAUtils";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+} from "chart.js";
+import { Bar } from "react-chartjs-2";
+import { ModalLoader } from "Components/CommonComponents";
+import { isEmpty } from "lodash";
+import dateFormat from "dateformat";
+
+const MetricGraphs = (props) => {
+  const { metricData } = props;
+  const [loader, setLoader] = useState(false);
+  const [hrsMetricsInfo, setHrsMetricsInfo] = useState([]);
+  const [daysMetricsInfo, setDaysMetricsInfo] = useState([]);
+  const [showHideGraph, setShowHideGraph] = useState(true);
+  const hrsRef = useRef();
+
+  useEffect(() => {
+    hrsRef.current.click();
+  }, []);
+
+  ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend
+  );
+
+  const params = {
+    serviceName: metricData.serviceName,
+    serviceType: metricData.serviceType,
+    clusterName: metricData.clusterName,
+    clientIP: metricData.clientIP,
+    appId: metricData.appId
+  };
+
+  const hrsMetrics = async () => {
+    setLoader(true);
+    let hrsMetricData = [];
+    try {
+      hrsMetricData = await fetchApi({
+        url: "audit/dailymetrics",
+        params: params
+      });
+      setHrsMetricsInfo(hrsMetricData.data.auditMetricsByHours);
+    } catch (error) {
+      serverError(error);
+    }
+    setLoader(false);
+  };
+
+  const daysMetrics = async () => {
+    setLoader(true);
+    let daysMetricInfo = [];
+    try {
+      daysMetricInfo = await fetchApi({
+        url: "audit/daysmetrics",
+        params: params
+      });
+
+      setDaysMetricsInfo(daysMetricInfo.data.auditMetricsByDays);
+    } catch (error) {
+      serverError(error);
+    }
+    setLoader(false);
+  };
+
+  const hrsOptions = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: "top"
+      }
+    }
+  };
+  const hrsLabels = hrsMetricsInfo?.map((metrics) => {
+    return `${metrics.hours} hrs`;
+  });
+
+  const hrsData = {
+    labels: hrsLabels,
+    datasets: [
+      {
+        label: "Audit Metrics By Hours",
+        data: hrsMetricsInfo?.map((metrics) => {
+          return metrics.numberOfAudits;
+        }),
+        backgroundColor: "#0f3554",
+        borderColor: "#0f3554"
+      }
+    ]
+  };
+
+  const dayOptions = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: "top"
+      }
+    }
+  };
+  const dayLabels = daysMetricsInfo?.map((metrics) => {
+    return dateFormat(parseInt(metrics.auditDate), "mm/dd/yyyy");
+  });
+
+  const dayData = {
+    labels: dayLabels,
+    datasets: [
+      {
+        label: "Audit Metrics By Day",
+        data: daysMetricsInfo?.map((metrics) => {
+          return metrics.numberOfAudits;
+        }),
+        backgroundColor: "#0f3554",
+        borderColor: "#0f3554"
+      }
+    ]
+  };
+
+  const NoDataFound = () => {
+    return (
+      <div data-id="emptyGraphSet" data-cy="emptyGraphSet">
+        <center>
+          <strong>No Metrics Data found</strong>
+        </center>
+      </div>
+    );
+  };
+
+  return loader ? (
+    <ModalLoader />
+  ) : (
+    <>
+      <div className="text-end mb-2">
+        <button
+          type="button"
+          onClick={() => {
+            daysMetrics();
+            setShowHideGraph(false);
+          }}
+          className={`btn btn-outline-dark btn-sm me-2 ${
+            showHideGraph ? "" : "btn-default-selected"
+          }`}
+        >
+          Day
+        </button>
+        <button
+          type="button"
+          ref={hrsRef}
+          className={`btn btn-outline-dark btn-sm ${
+            showHideGraph ? "btn-default-selected" : ""
+          }`}
+          onClick={() => {
+            hrsMetrics();
+            setShowHideGraph(true);
+          }}
+        >
+          Hour
+        </button>
+      </div>
+
+      {showHideGraph ? (
+        !isEmpty(hrsMetricsInfo) ? (
+          <div className="wrap" data-id="graphSet" data-cy="graphSet">
+            <Bar options={hrsOptions} data={hrsData} />
+          </div>
+        ) : (
+          <NoDataFound />
+        )
+      ) : !isEmpty(daysMetricsInfo) ? (
+        <div className="wrap" data-id="graphSet" data-cy="graphSet">
+          <Bar options={dayOptions} data={dayData} />
+        </div>
+      ) : (
+        <NoDataFound />
+      )}
+    </>
+  );
+};
+
+export default MetricGraphs;