Merge pull request #111 from MVarshini/PANDA-424

Including Grafana Links

frontend/README.md

@@ -1,7 +1,4 @@
 
-Currently, two official plugins are available:
-
-
 # Openshift Performance Dashbaord
 
 ## Dashboard directory structure

frontend/src/assets/constants/grafanaConstants.js

@@ -0,0 +1,48 @@
+export const GRAFANA_BASE_URL =
+  "https://grafana.rdu2.scalelab.redhat.com:3000/d/";
+export const DASHBOARD_KUBE_BURNER =
+  "D5E8c5XVz/kube-burner-report-mode?orgId=1";
+export const DASHBOARD_INGRESS =
+  "d6105ff8-bc26-4d64-951e-56da771b703d/ingress-perf?orgId=1&var-termination=edge&" +
+  "var-termination=http&var-termination=passthrough&" +
+  "var-termination=reencrypt&var-latency_metric=p99_lat_us" +
+  "&var-compare_by=uuid.keyword";
+export const DASHBOARD_NET_PERF =
+  "wINGhybVz/k8s-netperf?orgId=1&var-samples=3&var-service=All&" +
+  "var-parallelism=All&var-profile=All&var-messageSize=All&" +
+  "var-driver=netperf&var-hostNetwork=true&var-hostNetwork=false";
+export const DASHBOARD_QUAY =
+  "7nkJIoXVk/quay-dashboard-v2?orgId=1&var-api_endpoints_datasource=Quay%20QE%20-%20quay-vegeta&" +
+  "var-quay_push_pull_datasource=Quay%20QE%20-%20quay-push-pull";
+
+export const PROW_DATASOURCE_NETPERF = "&var-datasource=QE+K8s+netperf";
+export const PROW_DATASOURCE_INGRESS = "&var-datasource=QE+Ingress-perf";
+export const JENKINS_DATASOURCE_NETPERF = "&var-datasource=k8s-netperf";
+export const JENKINS_DATASOURCE_INGRESS = "&var-datasource=QE+Ingress-perf";
+export const PROW_DATASOURCE = "&var-Datasource=QE+kube-burner";
+export const DEFAULT_DATASOURCE =
+  "&var-Datasource=AWS+Pro+-+ripsaw-kube-burner";
+export const QUAY_LOAD_TEST = "quay-load-test";
+
+export const ciSystemMap = {
+  prow: {
+    "k8s-netperf": {
+      dataSource: PROW_DATASOURCE_NETPERF,
+      dashboardURL: DASHBOARD_NET_PERF,
+    },
+    "ingress-perf": {
+      dataSource: PROW_DATASOURCE_INGRESS,
+      dashboardURL: DASHBOARD_INGRESS,
+    },
+  },
+  jenkins: {
+    "k8s-netperf": {
+      dataSource: JENKINS_DATASOURCE_NETPERF,
+      dashboardURL: DASHBOARD_NET_PERF,
+    },
+    "ingress-perf": {
+      dataSource: JENKINS_DATASOURCE_INGRESS,
+      dashboardURL: DASHBOARD_INGRESS,
+    },
+  },
+};

frontend/src/components/atoms/LinkIcon/index.jsx

@@ -0,0 +1,21 @@
+import Proptypes from "prop-types";
+const LinkIcon = (props) => {
+  const { link, target, src, altText, height, width } = props;
+
+  return (
+    <>
+      <a target={target} href={link}>
+        <img src={src} alt={altText} style={{ height: height, width: width }} />
+      </a>
+    </>
+  );
+};
+LinkIcon.propTypes = {
+  link: Proptypes.string,
+  target: Proptypes.string,
+  src: Proptypes.node,
+  altText: Proptypes.string,
+  height: Proptypes.number,
+  width: Proptypes.number,
+};
+export default LinkIcon;

frontend/src/components/molecules/ExpandedRow/index.jsx

@@ -1,10 +1,13 @@
+import "./index.less";
+
 import * as CONSTANTS from "@/assets/constants/metadataConstants";
 
-import { Card, CardBody, Grid, GridItem } from "@patternfly/react-core";
+import { Card, CardBody, Grid, GridItem, Title } from "@patternfly/react-core";
 
 import MetadataRow from "../MetaDataRow";
 import PlotGraph from "@/components/atoms/PlotGraph";
 import PropTypes from "prop-types";
+import TasksInfo from "@/components/molecules/TasksInfo";
 import { uid } from "@/utils/helper.js";
 import { useSelector } from "react-redux";
 
@@ -43,6 +46,10 @@ const RowContent = (props) => {
                 <div className="divider" />
               </>
             ))}
+            <Title headingLevel="h4" className="type_heading">
+              Tasks ran
+            </Title>
+            <TasksInfo config={props.item} />
           </CardBody>
         </Card>
       </GridItem>

frontend/src/components/molecules/ExpandedRow/index.less

@@ -0,0 +1,3 @@
+.type_heading {
+    padding: 10px 0;
+}

frontend/src/components/molecules/MetaDataRow/index.jsx

@@ -28,7 +28,9 @@ const MetadataRow = (props) => {
 
   return (
     <>
-      <Title headingLevel="h4">{props.heading}</Title>
+      <Title headingLevel="h4" className="type_heading">
+        {props.heading}
+      </Title>
       <Table className="box" key={uid()} aria-label="metadata-table">
         <Thead>
           <Tr>

frontend/src/components/molecules/TasksInfo/index.jsx

@@ -0,0 +1,108 @@
+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 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 { formatTime } from "@/helpers/Formatters.js";
+import { useMemo } from "react";
+
+const TasksInfo = (props) => {
+  const { config } = props;
+
+  const startDate = useMemo(
+    () => new Date(config?.startDate).valueOf(),
+    [config?.startDate]
+  );
+  const endDate = useMemo(
+    () => new Date(config?.endDate).valueOf(),
+    [config?.endDate]
+  );
+
+  const status = useMemo(
+    () => config.jobStatus?.toLowerCase(),
+    [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 />,
+    }),
+    []
+  );
+  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}
+        />
+        <LinkIcon
+          link={config.buildUrl}
+          target={"_blank"}
+          src={config.ciSystem === "PROW" ? ProwIcon : JenkinsIcon}
+          altText={"build link"}
+          height={30}
+          width={30}
+        />
+      </div>
+    </>
+  );
+};
+TasksInfo.propTypes = {
+  config: Proptypes.object,
+};
+export default TasksInfo;

frontend/src/components/molecules/TasksInfo/index.less

@@ -0,0 +1,5 @@
+.info-wrapper {
+    display: flex;
+    justify-content: space-between;
+    width: 50%;
+}