Splunk Links in Telco:

cloud-bulldozer · Aug 27, 2024 · 1223fa2 · 1223fa2
1 parent da6a754
commit 1223fa2
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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 (
+    <LinkIcon
+      link={grafanaLink}
+      target={"_blank"}
+      src={GrafanaIcon}
+      altText={"grafana link"}
+      height={30}
+      width={30}
+    />
+  );
+};
+
+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
@@ -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 (
+    <LinkIcon
+      link={splunkLink}
+      target={"_blank"}
+      src={SplunkIcon}
+      altText={"splunk link"}
+      height={30}
+      width={30}
+    />
+  );
+};
+
+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
@@ -60,7 +60,7 @@ const RowContent = (props) => {
             <Title headingLevel="h4" className="type_heading">
               Tasks ran
             </Title>
-            <TasksInfo config={props.item} />
+            <TasksInfo config={props.item} type={props.type} />
           </CardBody>
         </Card>
       </GridItem>

diff --git 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: <ExclamationCircleIcon />,
-      failure: <ExclamationCircleIcon />,
-      success: <CheckCircleIcon />,
-      upstream_failed: <ExclamationTriangleIcon />,
+      failed: <ExclamationCircleIcon fill={"#C9190B"} />,
+      failure: <ExclamationCircleIcon fill={"#C9190B"} />,
+      success: <CheckCircleIcon fill={"#3E8635"} />,
+      upstream_failed: <ExclamationTriangleIcon fill={"#F0AB00"} />,
     }),
     []
   );
+
   return (
     <>
       <div className="info-wrapper">
         <div>{icons[status] ?? status.toUpperCase()}</div>
         <div>{config.benchmark}</div>
-        <div>{`(${formatTime(config?.jobDuration)})`}</div>
-        <LinkIcon
-          link={grafanaLink}
-          target={"_blank"}
-          src={GrafanaIcon}
-          altText={"grafana link"}
-          height={30}
-          width={30}
-        />
+        <div>
+          {status !== "upstream_failed"
+            ? `(${formatTime(config?.jobDuration)})`
+            : "Skipped"}
+        </div>
+        {props.type === "ocp" && (
+          <GrafanaLink
+            config={config}
+            startDate={startDate}
+            endDate={endDate}
+          />
+        )}
+        {props.type === "telco" && (
+          <SplunkLink config={config} startDate={startDate} endDate={endDate} />
+        )}
         <LinkIcon
           link={config.buildUrl}
           target={"_blank"}
@@ -104,5 +76,6 @@ const TasksInfo = (props) => {
 };
 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
@@ -1,5 +1,5 @@
 .info-wrapper {
     display: flex;
-    justify-content: space-between;
-    width: 50%;
+    justify-content: space-evenly;
+    width: 35%;
 }