Skip to content

Commit

Permalink
PANDA-569
Browse files Browse the repository at this point in the history
Bugs
  • Loading branch information
MVarshini committed Aug 30, 2024
1 parent e2efcd2 commit 6a80aa0
Show file tree
Hide file tree
Showing 8 changed files with 129 additions and 44 deletions.
8 changes: 7 additions & 1 deletion frontend/src/actions/quayActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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());
Expand Down Expand Up @@ -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(
Expand Down
29 changes: 24 additions & 5 deletions frontend/src/actions/telcoActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 });

Expand All @@ -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 },
Expand Down
63 changes: 33 additions & 30 deletions frontend/src/components/molecules/TableRows/index.jsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>
);
})
);
Expand Down
16 changes: 14 additions & 2 deletions frontend/src/components/organisms/TableLayout/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -62,7 +74,7 @@ const TableLayout = (props) => {
graphData={props?.graphData}
type={props.type}
/>
</Tbody>
)}
</Table>
<RenderPagination
items={totalItems}
Expand Down
25 changes: 24 additions & 1 deletion frontend/src/components/templates/Quay/index.jsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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(
() =>
Expand Down
28 changes: 25 additions & 3 deletions frontend/src/components/templates/Telco/index.jsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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(
() =>
Expand All @@ -62,7 +84,7 @@ const Telco = () => {
: otherExpandedRunNames;
});
if (isExpanding) {
dispatch(fetchGraphData(run.uuid, run.encryptedData));
dispatch(fetchGraphData(run.benchmark, run.uuid, run.encryptedData));
}
};

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/reducers/ocpReducer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/reducers/quayReducer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down

0 comments on commit 6a80aa0

Please sign in to comment.