From 1223fa2eca715088cb2cfcb6a58484929c77bc0c Mon Sep 17 00:00:00 2001 From: MVarshini Date: Tue, 27 Aug 2024 19:04:41 +0530 Subject: [PATCH] Splunk Links in Telco: --- frontend/src/actions/telcoActions.js | 19 ++-- .../src/assets/constants/splunkConstants.js | 22 +++++ .../components/atoms/GrafanaLink/index.jsx | 62 +++++++++++++ .../src/components/atoms/SplunkLink/index.jsx | 87 +++++++++++++++++++ .../molecules/ExpandedRow/index.jsx | 2 +- .../components/molecules/TasksInfo/index.jsx | 73 +++++----------- .../components/molecules/TasksInfo/index.less | 4 +- 7 files changed, 208 insertions(+), 61 deletions(-) create mode 100644 frontend/src/assets/constants/splunkConstants.js create mode 100644 frontend/src/components/atoms/GrafanaLink/index.jsx create mode 100644 frontend/src/components/atoms/SplunkLink/index.jsx diff --git a/frontend/src/actions/telcoActions.js b/frontend/src/actions/telcoActions.js index f72d9623..f04ab3c4 100644 --- a/frontend/src/actions/telcoActions.js +++ b/frontend/src/actions/telcoActions.js @@ -29,11 +29,20 @@ export const fetchTelcoJobsData = () => async (dispatch, getState) => { ...(end_date && { end_date }), }, }); - if (response?.data?.results?.length > 0) { + if (response.status === 200) { const startDate = response.data.startDate, endDate = response.data.endDate; //on initial load startDate and endDate are empty, so from response append to url appendDateFilter(startDate, endDate); + dispatch({ + type: TYPES.SET_TELCO_DATE_FILTER, + payload: { + start_date: startDate, + end_date: endDate, + }, + }); + } + if (response?.data?.results?.length > 0) { dispatch({ type: TYPES.SET_TELCO_JOBS_DATA, payload: response.data.results, @@ -42,13 +51,7 @@ export const fetchTelcoJobsData = () => async (dispatch, getState) => { type: TYPES.SET_TELCO_FILTERED_DATA, payload: response.data.results, }); - dispatch({ - type: TYPES.SET_TELCO_DATE_FILTER, - payload: { - start_date: startDate, - end_date: endDate, - }, - }); + dispatch(applyFilters()); dispatch(tableReCalcValues()); } diff --git a/frontend/src/assets/constants/splunkConstants.js b/frontend/src/assets/constants/splunkConstants.js new file mode 100644 index 00000000..bd00b0be --- /dev/null +++ b/frontend/src/assets/constants/splunkConstants.js @@ -0,0 +1,22 @@ +export const SPLUNK_BASE_URL = + "https://rhcorporate.splunkcloud.com/en-GB/app/search/"; + +export const BENCHMARK_URL = { + cyclictest: "cyclictest_kpis", + cpu_util: "cpu_util_kpis", + deployment: "deployment_kpis", + oslat: "oslat_kpis", + ptp: "ptp_kpis", + reboot: "reboot_kpis", + "rfc-2544": "rfc2544_", +}; + +export const THRESHOLD_VALUE = 0.03; +export const CPU_UTIL_QUERY = `form.high_cpu_treshhold=${THRESHOLD_VALUE}&form.selected_duration=*`; +export const CHART_COMPARISON_QUERY = `form.charts_comparison=ocp_version`; +export const OCP_VIEW_QUERY = `form.ocp_view=ocp_version`; +export const REBOOT_QUERY = `form.reboot_type=soft_reboot`; + +export const BUBBLE_CHART_LEGEND_QUERY = "form.bubble_chart_legend="; +export const RFC_LEGEND_VALUE = "kernel"; +export const PTP_LEGEND_VALUE = "ocp_build"; diff --git a/frontend/src/components/atoms/GrafanaLink/index.jsx b/frontend/src/components/atoms/GrafanaLink/index.jsx new file mode 100644 index 00000000..f4b01c30 --- /dev/null +++ b/frontend/src/components/atoms/GrafanaLink/index.jsx @@ -0,0 +1,62 @@ +import * as CONSTANTS from "@/assets/constants/grafanaConstants"; + +import GrafanaIcon from "@/assets/images/grafana-icon.png"; +import LinkIcon from "@/components/atoms/LinkIcon"; +import Proptypes from "prop-types"; +import { useMemo } from "react"; + +const GrafanaLink = (props) => { + const { config, startDate, endDate } = props; + const grafanaLink = useMemo(() => { + const ciSystem_lCase = config.ciSystem?.toLowerCase(); + const isProw = ciSystem_lCase === "prow"; + const discreteBenchmark = + CONSTANTS.ciSystemMap[ciSystem_lCase]?.[ciSystem_lCase?.benchmark]; + + const hasBenchmark = Object.prototype.hasOwnProperty.call( + CONSTANTS.ciSystemMap?.[ciSystem_lCase], + config.benchmark + ); + const datasource = isProw + ? CONSTANTS.PROW_DATASOURCE + : hasBenchmark + ? discreteBenchmark?.dataSource + : CONSTANTS.DEFAULT_DATASOURCE; + + const dashboardURL = + discreteBenchmark?.dashboardURL ?? CONSTANTS.DASHBOARD_KUBE_BURNER; + + const datePart = `&from=${startDate}&to=${endDate}`; + const uuidPart = `&var-uuid=${config.uuid}`; + + if (config.benchmark === CONSTANTS.QUAY_LOAD_TEST) + return `${CONSTANTS.GRAFANA_BASE_URL}${CONSTANTS.DASHBOARD_QUAY}${datePart}${uuidPart}`; + return `${CONSTANTS.GRAFANA_BASE_URL}${dashboardURL}${datasource}${datePart}&var-platform=${config.platform}"&var-workload=${config.benchmark}${uuidPart}`; + }, [ + config.benchmark, + config.ciSystem, + config.platform, + config.uuid, + endDate, + startDate, + ]); + + return ( + + ); +}; + +GrafanaLink.propTypes = { + config: Proptypes.object, + endDate: Proptypes.number, + startDate: Proptypes.number, +}; + +export default GrafanaLink; diff --git a/frontend/src/components/atoms/SplunkLink/index.jsx b/frontend/src/components/atoms/SplunkLink/index.jsx new file mode 100644 index 00000000..7b4b86b0 --- /dev/null +++ b/frontend/src/components/atoms/SplunkLink/index.jsx @@ -0,0 +1,87 @@ +import * as CONSTANTS from "@/assets/constants/splunkConstants"; + +import LinkIcon from "@/components/atoms/LinkIcon"; +import Proptypes from "prop-types"; +import SplunkIcon from "@/assets/images/splunk-icon.png"; +import { useMemo } from "react"; + +const CONSTANTSLink = (props) => { + const { config, startDate, endDate } = props; + const splunkLink = useMemo(() => { + const url = `${CONSTANTS.SPLUNK_BASE_URL}${ + CONSTANTS.BENCHMARK_URL[config.benchmark] + }`; + + const query = `form.global_time.earliest=${encodeURIComponent( + new Date(startDate).toISOString() + )}&form.global_time.latest=${encodeURIComponent( + new Date(endDate).toISOString() + )}&form.formal_tag=${encodeURIComponent( + config.formal + )}&form.ocp_version=${encodeURIComponent( + config.shortVersion + )}&&form.ocp_build=${encodeURIComponent( + config.ocpVersion + )}&form.node_name=${encodeURIComponent(config.nodeName)}& + &form.general_statistics=${encodeURIComponent(config.shortVersion)}`; + + const kernelQuery = `form.dashboard_kernels=${encodeURIComponent( + config.kernel + )}`; + + const histogramQuery = `form.histogram=${encodeURIComponent( + config.ocpVersion + )}`; + + switch (config.benchmark) { + case "cyclictest": { + return `${url}?${query}&${CONSTANTS.OCP_VIEW_QUERY}&${kernelQuery}`; + } + case "cpu_util": { + return `${url}?${query}&${CONSTANTS.CPU_UTIL_QUERY}&${kernelQuery}`; + } + case "deployment": { + return `${url}?${query}`; + } + case "oslat": { + return `${url}?${query}&${CONSTANTS.OCP_VIEW_QUERY}&${CONSTANTS.CHART_COMPARISON_QUERY}&${kernelQuery}`; + } + case "ptp": { + return `${url}?${query}&${CONSTANTS.BUBBLE_CHART_LEGEND_QUERY}${CONSTANTS.PTP_LEGEND_VALUE}&${kernelQuery}`; + } + case "reboot": { + return `${url}?${query}&${CONSTANTS.CHART_COMPARISON_QUERY}&${CONSTANTS.REBOOT_QUERY}&${kernelQuery}`; + } + case "rfc-2544": { + return `${url}?${query}&${CONSTANTS.BUBBLE_CHART_LEGEND_QUERY}${CONSTANTS.RFC_LEGEND_VALUE}&${histogramQuery}&${kernelQuery}`; + } + } + }, [ + config.benchmark, + config.formal, + config.kernel, + config.nodeName, + config.ocpVersion, + config.shortVersion, + endDate, + startDate, + ]); + + return ( + + ); +}; + +CONSTANTSLink.propTypes = { + config: Proptypes.object, + endDate: Proptypes.number, + startDate: Proptypes.number, +}; +export default CONSTANTSLink; diff --git a/frontend/src/components/molecules/ExpandedRow/index.jsx b/frontend/src/components/molecules/ExpandedRow/index.jsx index b141b2eb..981d5660 100644 --- a/frontend/src/components/molecules/ExpandedRow/index.jsx +++ b/frontend/src/components/molecules/ExpandedRow/index.jsx @@ -60,7 +60,7 @@ const RowContent = (props) => { Tasks ran - + diff --git a/frontend/src/components/molecules/TasksInfo/index.jsx b/frontend/src/components/molecules/TasksInfo/index.jsx index 4c385ec3..8d24e995 100644 --- a/frontend/src/components/molecules/TasksInfo/index.jsx +++ b/frontend/src/components/molecules/TasksInfo/index.jsx @@ -1,18 +1,17 @@ import "./index.less"; -import * as CONSTANTS from "@/assets/constants/grafanaConstants"; - import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, } from "@patternfly/react-icons"; -import GrafanaIcon from "@/assets/images/grafana-icon.png"; +import GrafanaLink from "@/components/atoms/GrafanaLink"; import JenkinsIcon from "@/assets/images/jenkins-icon.svg"; import LinkIcon from "@/components/atoms/LinkIcon"; import Proptypes from "prop-types"; import ProwIcon from "@/assets/images/prow-icon.png"; +import SplunkLink from "@/components/atoms/SplunkLink"; import { formatTime } from "@/helpers/Formatters.js"; import { useMemo } from "react"; @@ -33,63 +32,36 @@ const TasksInfo = (props) => { [config.jobStatus] ); - const grafanaLink = useMemo(() => { - const ciSystem_lCase = config.ciSystem?.toLowerCase(); - const isProw = ciSystem_lCase === "prow"; - const discreteBenchmark = - CONSTANTS.ciSystemMap[ciSystem_lCase]?.[ciSystem_lCase?.benchmark]; - - const hasBenchmark = Object.prototype.hasOwnProperty.call( - CONSTANTS.ciSystemMap?.[ciSystem_lCase], - config.benchmark - ); - const datasource = isProw - ? CONSTANTS.PROW_DATASOURCE - : hasBenchmark - ? discreteBenchmark?.dataSource - : CONSTANTS.DEFAULT_DATASOURCE; - - const dashboardURL = - discreteBenchmark?.dashboardURL ?? CONSTANTS.DASHBOARD_KUBE_BURNER; - - const datePart = `&from=${startDate}&to=${endDate}`; - const uuidPart = `&var-uuid=${config.uuid}`; - - if (config.benchmark === CONSTANTS.QUAY_LOAD_TEST) - return `${CONSTANTS.GRAFANA_BASE_URL}${CONSTANTS.DASHBOARD_QUAY}${datePart}${uuidPart}`; - return `${CONSTANTS.GRAFANA_BASE_URL}${dashboardURL}${datasource}${datePart}&var-platform=${config.platform}"&var-workload=${config.benchmark}${uuidPart}`; - }, [ - config.benchmark, - config.ciSystem, - config.platform, - config.uuid, - endDate, - startDate, - ]); - const icons = useMemo( () => ({ - failed: , - failure: , - success: , - upstream_failed: , + failed: , + failure: , + success: , + upstream_failed: , }), [] ); + return ( <>
{icons[status] ?? status.toUpperCase()}
{config.benchmark}
-
{`(${formatTime(config?.jobDuration)})`}
- +
+ {status !== "upstream_failed" + ? `(${formatTime(config?.jobDuration)})` + : "Skipped"} +
+ {props.type === "ocp" && ( + + )} + {props.type === "telco" && ( + + )} { }; 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 index dd088b46..e51880b8 100644 --- a/frontend/src/components/molecules/TasksInfo/index.less +++ b/frontend/src/components/molecules/TasksInfo/index.less @@ -1,5 +1,5 @@ .info-wrapper { display: flex; - justify-content: space-between; - width: 50%; + justify-content: space-evenly; + width: 35%; } \ No newline at end of file