Merge pull request #113 from MVarshini/PANDA-569

CPT Dashboard Bugs
cloud-bulldozer · Aug 30, 2024 · e9d79cb · e9d79cb
2 parents 685b6aa + 6a80aa0
commit e9d79cb
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 44 deletions.
diff --git a/frontend/src/actions/quayActions.js b/frontend/src/actions/quayActions.js
@@ -117,6 +117,7 @@ export const removeQuayAppliedFilters =
     appendQueryString({ ...appliedFilters, start_date, end_date }, navigate);
     dispatch(applyFilters());
   };
+
 export const applyFilters = () => (dispatch, getState) => {
   const { appliedFilters } = getState().quay;
 
@@ -131,7 +132,7 @@ export const applyFilters = () => (dispatch, getState) => {
     : results;
 
   dispatch({
-    type: TYPES.SET_FILTERED_DATA,
+    type: TYPES.SET_QUAY_FILTERED_DATA,
     payload: filtered,
   });
   dispatch(tableReCalcValues());
@@ -166,6 +167,11 @@ export const setSelectedFilterFromUrl = (params) => (dispatch, getState) => {
   });
 };
 
+export const setFilterFromURL = (searchParams) => ({
+  type: TYPES.SET_QUAY_APPLIED_FILTERS,
+  payload: searchParams,
+});
+
 export const setSelectedFilter =
   (selectedCategory, selectedOption, isFromMetrics) => (dispatch) => {
     const selectedFilters = dispatch(

diff --git a/frontend/src/actions/telcoActions.js b/frontend/src/actions/telcoActions.js
@@ -154,6 +154,11 @@ export const setTelcoAppliedFilters = (navigate) => (dispatch, getState) => {
   dispatch(applyFilters());
 };
 
+export const setFilterFromURL = (searchParams) => ({
+  type: TYPES.SET_TELCO_APPLIED_FILTERS,
+  payload: searchParams,
+});
+
 export const setSelectedFilterFromUrl = (params) => (dispatch, getState) => {
   const selectedFilters = cloneDeep(getState().telco.selectedFilters);
   for (const key in params) {
@@ -238,7 +243,7 @@ export const setTableColumns = (key, isAdding) => (dispatch, getState) => {
   });
 };
 export const fetchGraphData =
-  (uuid, encryption) => async (dispatch, getState) => {
+  (benchmark, uuid, encryption) => async (dispatch, getState) => {
     try {
       dispatch({ type: TYPES.GRAPH_LOADING });
 
@@ -250,10 +255,24 @@ export const fetchGraphData =
         );
 
         if (response.status === 200) {
-          const result = Object.keys(response.data).map((key) => [
-            key,
-            response.data[key],
-          ]);
+          let result;
+          if (
+            benchmark === "oslat" ||
+            benchmark === "cyclictest" ||
+            benchmark === "deployment"
+          ) {
+            const benchmarkData = response.data[benchmark];
+            result = Object.keys(response.data[benchmark]).map((key) => [
+              key,
+              benchmarkData[key],
+            ]);
+          } else {
+            result = Object.keys(response.data).map((key) => [
+              key,
+              response.data[key],
+            ]);
+          }
+
           dispatch({
             type: TYPES.SET_TELCO_GRAPH_DATA,
             payload: { uuid, data: result },

diff --git a/frontend/src/components/molecules/TableRows/index.jsx b/frontend/src/components/molecules/TableRows/index.jsx
@@ -1,6 +1,6 @@
 import "./index.less";
 
-import { ExpandableRowContent, Td, Tr } from "@patternfly/react-table";
+import { ExpandableRowContent, Tbody, Td, Tr } from "@patternfly/react-table";
 
 import RowContent from "@/components/molecules/ExpandedRow";
 import TableCell from "@/components/atoms/TableCell";
@@ -12,40 +12,43 @@ const TableRows = (props) => {
   return (
     rows?.length > 0 &&
     rows.map((item, rowIndex) => {
-      return (
-        <>
-          <Tr key={uid()}>
-            {addExpansion && (
-              <Td
-                expand={{
-                  rowIndex,
-                  isExpanded: props?.isRunExpanded(item),
-                  onToggle: () =>
-                    props?.setRunExpanded(item, !props?.isRunExpanded(item)),
-                  expandId: `expandable-row${uid()}`,
-                }}
-              />
-            )}
+      return addExpansion ? (
+        <Tbody isExpanded={props?.isRunExpanded(item)} key={uid()}>
+          <Tr>
+            <Td
+              expand={{
+                rowIndex,
+                isExpanded: props?.isRunExpanded(item),
+                onToggle: () =>
+                  props?.setRunExpanded(item, !props?.isRunExpanded(item)),
+                expandId: `expandable-row${uid()}`,
+              }}
+            />
 
             {columns.map((col) => (
               <TableCell key={uid()} col={col} item={item} />
             ))}
           </Tr>
-          {addExpansion && (
-            <Tr isExpanded={props?.isRunExpanded(item)}>
-              <Td colSpan={8}>
-                <ExpandableRowContent>
-                  <RowContent
-                    key={uid()}
-                    item={item}
-                    graphData={props.graphData}
-                    type={props.type}
-                  />
-                </ExpandableRowContent>
-              </Td>
-            </Tr>
-          )}
-        </>
+
+          <Tr isExpanded={props?.isRunExpanded(item)}>
+            <Td colSpan={8}>
+              <ExpandableRowContent>
+                <RowContent
+                  key={uid()}
+                  item={item}
+                  graphData={props.graphData}
+                  type={props.type}
+                />
+              </ExpandableRowContent>
+            </Td>
+          </Tr>
+        </Tbody>
+      ) : (
+        <Tr>
+          {columns.map((col) => (
+            <TableCell key={uid()} col={col} item={item} />
+          ))}
+        </Tr>
       );
     })
   );

diff --git a/frontend/src/components/organisms/TableLayout/index.jsx b/frontend/src/components/organisms/TableLayout/index.jsx
@@ -52,7 +52,19 @@ const TableLayout = (props) => {
               ))}
           </Tr>
         </Thead>
-        <Tbody isExpanded={addExpansion}>
+        {!addExpansion ? (
+          <Tbody>
+            <TableRows
+              rows={tableData}
+              columns={tableColumns}
+              addExpansion={addExpansion}
+              isRunExpanded={props?.isRunExpanded}
+              setRunExpanded={props?.setRunExpanded}
+              graphData={props?.graphData}
+              type={props.type}
+            />
+          </Tbody>
+        ) : (
           <TableRows
             rows={tableData}
             columns={tableColumns}
@@ -62,7 +74,7 @@ const TableLayout = (props) => {
             graphData={props?.graphData}
             type={props.type}
           />
-        </Tbody>
+        )}
       </Table>
       <RenderPagination
         items={totalItems}

diff --git a/frontend/src/components/templates/Quay/index.jsx b/frontend/src/components/templates/Quay/index.jsx
@@ -1,20 +1,24 @@
 import {
   fetchGraphData,
   fetchQuayJobsData,
+  setFilterFromURL,
+  setQuayDateFilter,
   setSelectedFilter,
+  setSelectedFilterFromUrl,
   setTableColumns,
 } from "@/actions/quayActions.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 import MetricsTab from "@/components/organisms/MetricsTab";
 import TableFilter from "@/components/organisms/TableFilters";
 import TableLayout from "@/components/organisms/TableLayout";
-import { useNavigate } from "react-router-dom";
 
 const Quay = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
 
   const {
     tableData,
@@ -40,6 +44,25 @@ const Quay = () => {
     dispatch(fetchQuayJobsData());
   }, [dispatch]);
 
+  useEffect(() => {
+    if (searchParams.size > 0) {
+      // date filter is set apart
+      const startDate = searchParams.get("start_date");
+      const endDate = searchParams.get("end_date");
+
+      searchParams.delete("start_date");
+      searchParams.delete("end_date");
+      const params = Object.fromEntries(searchParams);
+      const obj = {};
+      for (const key in params) {
+        obj[key] = params[key].split(",");
+      }
+      dispatch(setFilterFromURL(obj));
+      dispatch(setSelectedFilterFromUrl(params));
+      dispatch(setQuayDateFilter(startDate, endDate, navigate));
+    }
+  }, []);
+
   //Filter Helper
   const modifidedTableFilters = useMemo(
     () =>

diff --git a/frontend/src/components/templates/Telco/index.jsx b/frontend/src/components/templates/Telco/index.jsx
@@ -1,21 +1,24 @@
 import {
   fetchGraphData,
   fetchTelcoJobsData,
+  setFilterFromURL,
   setSelectedFilter,
+  setSelectedFilterFromUrl,
   setTableColumns,
+  setTelcoDateFilter,
 } from "@/actions/telcoActions.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 import MetricsTab from "@/components/organisms/MetricsTab";
 import TableFilter from "@/components/organisms/TableFilters";
 import TableLayout from "@/components/organisms/TableLayout";
-import { useNavigate } from "react-router-dom";
 
 const Telco = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-
+  const [searchParams] = useSearchParams();
   const {
     tableData,
     tableColumns,
@@ -40,6 +43,25 @@ const Telco = () => {
     dispatch(fetchTelcoJobsData());
   }, [dispatch]);
 
+  useEffect(() => {
+    if (searchParams.size > 0) {
+      // date filter is set apart
+      const startDate = searchParams.get("start_date");
+      const endDate = searchParams.get("end_date");
+
+      searchParams.delete("start_date");
+      searchParams.delete("end_date");
+      const params = Object.fromEntries(searchParams);
+      const obj = {};
+      for (const key in params) {
+        obj[key] = params[key].split(",");
+      }
+      dispatch(setFilterFromURL(obj));
+      dispatch(setSelectedFilterFromUrl(params));
+      dispatch(setTelcoDateFilter(startDate, endDate, navigate));
+    }
+  }, []);
+
   //Filter Helper
   const modifidedTableFilters = useMemo(
     () =>
@@ -62,7 +84,7 @@ const Telco = () => {
         : otherExpandedRunNames;
     });
     if (isExpanding) {
-      dispatch(fetchGraphData(run.uuid, run.encryptedData));
+      dispatch(fetchGraphData(run.benchmark, run.uuid, run.encryptedData));
     }
   };
 

diff --git a/frontend/src/reducers/ocpReducer.js b/frontend/src/reducers/ocpReducer.js
@@ -68,7 +68,7 @@ const initialState = {
     { name: "Control Plane Architecture", value: "controlPlaneArch" },
   ],
   nodeKeys: [
-    { name: "Master", value: "masterNodesCount" },
+    { name: "Master", value: "masterNodesType" },
     { name: "Worker", value: "workerNodesType" },
     { name: "Infra", value: "infraNodesType" },
     { name: "Workload", value: "benchmark" },

diff --git a/frontend/src/reducers/quayReducer.js b/frontend/src/reducers/quayReducer.js
@@ -42,7 +42,7 @@ const initialState = {
     { name: "Test ID", value: "uuid" },
   ],
   nodeKeys: [
-    { name: "Master", value: "masterNodesCount" },
+    { name: "Master", value: "masterNodesType" },
     { name: "Worker", value: "workerNodesType" },
     { name: "Infra", value: "infraNodesType" },
     { name: "Workload", value: "benchmark" },