-
-
- Release Binary: {config.cluster_version && config.cluster_version || config.ocpVersion} -
- Cluster Name: {config.cluster_name && config.cluster_name || config.clusterName} -
- Cluster Type: {config.cluster_type && config.cluster_type || config.clusterType} -
- Network Type: {config.network_type && config.network_type || config.networkType} -
- Benchmark Status: {icons[config.job_status && config.job_status || config.jobStatus] || config.job_status && config.job_status || config.jobStatus} -
- Duration: {formatTime(config.job_duration && config.job_duration || config.jobDuration)} -
- Test ID: {config.uuid} -
- Has IPSEC: {config.ipsec} -
- FIPS Enabled: {config.fips} -
- Is Encrypted: {config.encrypted} -
- Encryption Type: {config.encryptionType} -
- Control Plane Access: {config.publish} -
- Control Plane Arch.: {config.controlPlaneArch} -
- Compute Nodes Arch.: {config.computeArch} -
-
-
- Master: {config.master_type && config.master_type || config.masterNodesType} -
- Worker: {config.worker_type && config.worker_type || config.workerNodesType} -
- Workload: {config.workload_type && config.workload_type || config.benchmark} -
- Infra: {config.infra_type && config.infra_type || config.infraNodesType} -
-
-
- Master: {config.master_count && config.master_count || config.masterNodesCount} -
- Worker: {config.worker_count && config.worker_count || config.workerNodesCount} -
- Infra: {config.infra_count && config.infra_count || config.infraNodesCount} -
- Total Nodes: {config.workload_count && config.workload_count || config.totalNodesCount} -
Awaiting Results
-
- {list_view &&
- list_view.map(
- (value, index) =>
| } - { columns && columns.map( (item, index) => - | {item} | )} -
|---|
-
-
- Release Binary: {config.cluster_version && config.cluster_version || config.ocpVersion} -
- Cluster Name: {config.cluster_name && config.cluster_name || config.clusterName} -
- Cluster Type: {config.cluster_type && config.cluster_type || config.clusterType} -
- Network Type: {config.network_type && config.network_type || config.networkType} -
- Benchmark Status: {icons[config.job_status && config.job_status || config.jobStatus] || config.job_status && config.job_status || config.jobStatus} -
- Duration: {formatTime(config.job_duration && config.job_duration || config.jobDuration)} -
- Test ID: {config.uuid} -
-
-
- Master: {config.master_type && config.master_type || config.masterNodesType} -
- Worker: {config.worker_type && config.worker_type || config.workerNodesType} -
- Workload: {config.workload_type && config.workload_type || config.benchmark} -
- Infra: {config.infra_type && config.infra_type || config.infraNodesType} -
-
-
- Master: {config.master_count && config.master_count || config.masterNodesCount} -
- Worker: {config.worker_count && config.worker_count || config.workerNodesCount} -
- Infra: {config.infra_count && config.infra_count || config.infraNodesCount} -
- Total Nodes: {config.workload_count && config.workload_count || config.totalNodesCount} -
Awaiting Results
-
-
- Release Binary: {config.cluster_version && config.cluster_version || config.ocpVersion} -
- Cluster Name: {config.cluster_name && config.cluster_name || config.nodeName} -
- Cluster Type: {config.cluster_type && config.cluster_type || "SNO spoke"} -
- Network Type: {config.network_type && config.network_type || "OVNKubernetes"} -
- CPU: {config.cpu_version && config.cpu_version || config.cpu} -
- Kernel: {config.kernel_version && config.kernel_version || config.kernel} -
- IsFormal: {config.is_formal && config.is_formal || config.formal} -
- Benchmark Status: {icons[config.job_status && config.job_status || config.jobStatus] || config.job_status && config.job_status || config.jobStatus} -
- Duration: {formatTime(config.job_duration && config.job_duration || config.jobDuration)} -
-
-
- Master: {config.master_type && config.master_type || "Baremetal"} -
- Workload: {config.workload_type && config.workload_type || config.benchmark} -
-
-
- Master: {config.master_count && config.master_count || "1"} -
- Total Nodes: {config.workload_count && config.workload_count || "1"} -
Awaiting Results
![{"Grafana]({"assets/images/grafana-icon.png"}){kind=icon}
-
- }
- return {
- getGrafanaLink, getTimeFormat, status
- }
-}
diff --git a/frontend/src/components/css/NavBar.css b/frontend/src/components/css/NavBar.css
deleted file mode 100644
index e923acbb..00000000
--- a/frontend/src/components/css/NavBar.css
+++ /dev/null
@@ -1,9 +0,0 @@
-
-.fixed-navbar {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a shadow if desired */
- z-index: 1000; /* Ensure it appears above other content */
-}
diff --git a/frontend/src/components/css/PlatformView.css b/frontend/src/components/css/PlatformView.css
deleted file mode 100644
index afed3c56..00000000
--- a/frontend/src/components/css/PlatformView.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.PlatformView {
- text-align: center;
- background-color: white !important;
-}
-
-.PlatformView-link {
- color: #61dafb;
-}
-
-.list-item-key {
- font-weight: bold;
-}
diff --git a/frontend/src/components/molecules/ColumnMenuFilter/index.jsx b/frontend/src/components/molecules/ColumnMenuFilter/index.jsx
new file mode 100644
index 00000000..2331ac9c
--- /dev/null
+++ b/frontend/src/components/molecules/ColumnMenuFilter/index.jsx
@@ -0,0 +1,81 @@
+import "./index.less";
+
+import {
+ MenuToggle,
+ Select,
+ SelectList,
+ SelectOption,
+} from "@patternfly/react-core";
+import React, { useMemo } from "react";
+
+import PropTypes from "prop-types";
+import TableColumnIcon from "@/components/atoms/TableColumnIcon";
+import { uid } from "@/utils/helper";
+import { useSelector } from "react-redux";
+
+const ColumnMenuFilter = (props) => {
+ const [isOpen, setIsOpen] = React.useState(false);
+
+ const { tableFilters, tableColumns } = useSelector(
+ (state) => state[props.type]
+ );
+
+ const onToggleClick = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const activeTableColumns = useMemo(
+ () => tableColumns.map((col) => col.value),
+ [tableColumns]
+ );
+
+ const onSelect = (_event, value) => {
+ if (activeTableColumns.includes(value)) {
+ props.setColumns(value, false);
+ } else {
+ props.setColumns(value, true);
+ }
+ };
+ const toggle = (toggleRef) => (
+ No data to plot
+ ) : (
+ getGraphData(props.item.uuid)[0]?.data?.map((bit) => {
+ return (
+ <>
+ No data to plot
+ )}
+ | + {columnNames.key} + | +{columnNames.value} | +
|---|---|
| {item.name} | ++ {item.value === "jobDuration" + ? formatTime(props.metadata[item.value]) + : item.value === "jobStatus" + ? icons[props.metadata[item.value]] + : props.metadata[item.value] ?? defaultValue[item.value]} + | +
+
+
+ );
+};
+TasksInfo.propTypes = {
+ config: Proptypes.object,
+ type: Proptypes.string,
+};
+export default TasksInfo;
diff --git a/frontend/src/components/molecules/TasksInfo/index.less b/frontend/src/components/molecules/TasksInfo/index.less
new file mode 100644
index 00000000..e51880b8
--- /dev/null
+++ b/frontend/src/components/molecules/TasksInfo/index.less
@@ -0,0 +1,5 @@
+.info-wrapper {
+ display: flex;
+ justify-content: space-evenly;
+ width: 35%;
+}
\ No newline at end of file
diff --git a/frontend/src/components/organisms/Header/index.jsx b/frontend/src/components/organisms/Header/index.jsx
new file mode 100644
index 00000000..05364c09
--- /dev/null
+++ b/frontend/src/components/organisms/Header/index.jsx
@@ -0,0 +1,53 @@
+import "./index.less";
+
+import {
+ Brand,
+ Masthead,
+ MastheadBrand,
+ MastheadContent,
+ MastheadMain,
+ MastheadToggle,
+ PageToggleButton,
+} from "@patternfly/react-core";
+import { useDispatch, useSelector } from "react-redux";
+
+import { BarsIcon } from "@patternfly/react-icons";
+import logo from "@/assets//logo.png";
+import { toggleSideMenu } from "@/actions/sideMenuActions";
+
+const Header = () => {
+ const isSideMenuOpen = useSelector((state) => state.sidemenu.isSideMenuOpen);
+
+ const dispatch = useDispatch();
+ const onSidebarToggle = () => {
+ dispatch(toggleSideMenu(!isSideMenuOpen));
+ };
+ return (
+ {icons[status] ?? status.toUpperCase()}
+ {config.benchmark}
+
+ {status !== "upstream_failed"
+ ? `(${formatTime(config?.jobDuration)})`
+ : "Skipped"}
+
+ {props.type === "ocp" && (
+
+
+ Last Updated: 21/02/2024 13:26:30
+
+ {children}
+ {isLoading && (
+
+ );
+};
+
+export default LoadingComponent;
diff --git a/frontend/src/components/organisms/LoadingComponent/index.less b/frontend/src/components/organisms/LoadingComponent/index.less
new file mode 100644
index 00000000..84e6cfe7
--- /dev/null
+++ b/frontend/src/components/organisms/LoadingComponent/index.less
@@ -0,0 +1,29 @@
+.main-page-container {
+ position: relative;
+ height: 100%;
+ .spinner-container {
+ width: 15%;
+ height: 15%;
+ position: absolute;
+ top: 50%;
+ left: 45%;
+ z-index: 9999;
+ svg {
+ width: 45px;
+ height: 45px;
+ }
+ }
+}
+// .main-with-spinner {
+// pointer-events: none;
+// height: 100%;
+// // position: fixed; /* Sit on top of the page content */
+// width: 100%; /* Full width (cover the whole page) */
+// top: 0;
+// left: 0;
+// right: 0;
+// bottom: 0;
+// background-color: rgba(0, 0, 0, 0.08); /* background with opacity */
+// z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+// cursor: pointer; /* Add a pointer on hover */
+// }
diff --git a/frontend/src/components/organisms/MetricsTab/index.jsx b/frontend/src/components/organisms/MetricsTab/index.jsx
new file mode 100644
index 00000000..83e10839
--- /dev/null
+++ b/frontend/src/components/organisms/MetricsTab/index.jsx
@@ -0,0 +1,102 @@
+import "./index.less";
+
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionToggle,
+} from "@patternfly/react-core";
+import {
+ removeAppliedFilters,
+ setAppliedFilters,
+ setOtherSummaryFilter,
+} from "@/actions/filterActions";
+
+import MetricCard from "@/components/molecules/MetricCard";
+import PropTypes from "prop-types";
+import { useState } from "react";
+
+const MetricsTab = (props) => {
+ const [expanded, setExpanded] = useState("metrics-toggle");
+ const { totalItems, summary } = props;
+ const onToggle = (id) => {
+ if (id === expanded) {
+ setExpanded("");
+ } else {
+ setExpanded(id);
+ }
+ };
+ const removeStatusFilter = () => {
+ if (
+ Array.isArray(props.appliedFilters["jobStatus"]) &&
+ props.appliedFilters["jobStatus"].length > 0
+ ) {
+ props.appliedFilters["jobStatus"].forEach((element) => {
+ props.updateSelectedFilter("jobStatus", element, true);
+ removeAppliedFilters(
+ "jobStatus",
+ element,
+ props.navigation,
+ props.type
+ );
+ });
+ }
+ };
+ const applyStatusFilter = (value) => {
+ props.updateSelectedFilter("jobStatus", value, true);
+ setAppliedFilters(props.navigation, props.type);
+ };
+ const applyOtherFilter = () => {
+ removeStatusFilter();
+ setOtherSummaryFilter(props.type);
+ };
+ return (
+
+
+ )}
+ | } + + {tableColumns?.length > 0 && + tableColumns.map((col, idx) => ( + | + {col.name} + | + ))} +
|---|
{i}
; + })} +
-
- return