grafana component creation

server/elasticsearchService.js

@@ -144,13 +144,15 @@ export class ElasticsearchService {
       total_node_count,
       cluster_version,
       kubernetes_objects_count,
+      run_uuid,
     } = source;
 
     const scenario = scenarios[0] || {};
     const parameters = scenario.parameters?.[0] || {};
 
     const parsedData = {
       id,
+      uuid: run_uuid,
       timestamp: timestamp || atTimestamp || new Date().toISOString(),
       start_time: start_timestamp || new Date().toISOString(),
       end_time: end_timestamp || new Date().toISOString(),

src/assets/constants/grafanaConstants.js

@@ -0,0 +1,6 @@
+export const GRAFANA_BASE_URL =
+  "https://grafana.rdu2.scalelab.redhat.com:3000/d/";
+export const DASHBOARD_ID = "e02159f5-3212-4ed0-b302-d1ff0a15300d";
+export const DASHBOARD_NAME = "pod-scenario-chaos";
+export const ORG_ID = "1";
+export const DATASOURCE_ID = "bc8a9e77-4816-4004-a752-7ac41f90e3a3";

src/components/atoms/GrafanaLink/index.jsx

@@ -0,0 +1,73 @@
+import * as CONSTANTS from "@/assets/constants/grafanaConstants";
+import GrafanaIcon from "@/assets/logo/grafana-icon.png";
+import LinkIcon from "@/components/atoms/LinkIcon";
+import PropTypes from "prop-types";
+import { useMemo } from "react";
+
+const GrafanaLink = (props) => {
+  const { config = {}, uuid } = props;
+  const grafanaLink = useMemo(() => {
+    // Handle missing config
+    if (!config) {
+      return CONSTANTS.GRAFANA_BASE_URL;
+    }
+
+    // Config values
+    const platform = config.cloud_infrastructure ?? '';
+    const cloudType = config.cloud_type ?? '';
+    const networkType = config.network_plugins?.[0] ?? '';
+    const nodeCount = config.total_node_count ?? '';
+    const clusterVersion = config.cluster_version ?? '';
+    const majorVersion = clusterVersion ? clusterVersion.match(/^(\d+\.\d+)/)?.[1] || '' : '';
+    const runUuid = uuid ?? '';
+    const params = new URLSearchParams();
+
+    // Required parameters
+    params.append('orgId', CONSTANTS.ORG_ID);
+    params.append('var-Datasource', CONSTANTS.DATASOURCE_ID);
+
+    const grafanaVariables = {
+      'var-platform': platform,
+      'var-cloud_type': cloudType,
+      'var-networkType': networkType,
+      'var-node_count': (nodeCount !== '' && nodeCount != null) ? String(nodeCount) : '',
+      'var-major_version': majorVersion,
+      'var-run_uuid': runUuid,
+    };
+
+    // Append only non-empty variables
+    Object.entries(grafanaVariables).forEach(([key, value]) => {
+      if (value !== '') {
+        params.append(key, value);
+      }
+    });
+
+    // Construct the URL
+    return `${CONSTANTS.GRAFANA_BASE_URL}${CONSTANTS.DASHBOARD_ID}/${CONSTANTS.DASHBOARD_NAME}?${params.toString()}`;
+  }, [
+    config?.cloud_infrastructure,
+    config?.cloud_type,
+    config?.network_plugins,
+    config?.total_node_count,
+    config?.cluster_version,
+    uuid,
+  ]);
+
+  return (
+    <LinkIcon
+      link={grafanaLink}
+      target={"_blank"}
+      src={GrafanaIcon}
+      altText={"grafana link"}
+      height={30}
+      width={30}
+    />
+  );
+};
+
+GrafanaLink.propTypes = {
+  config: PropTypes.object,
+  uuid: PropTypes.string,
+};
+
+export default GrafanaLink;

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;

src/components/molecules/ConfigRow/index.jsx

@@ -4,6 +4,7 @@ import { Card, CardBody, Title } from "@patternfly/react-core";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 
 import NodeCard from "@/components/organisms/NodeCard";
+import GrafanaLink from "@/components/atoms/GrafanaLink";
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -74,6 +75,10 @@ const ConfigRow = (props) => {
             <NodeCard key={idx} summary={item} />
           ))}
         </div>
+        <GrafanaLink
+          config={doc.config || {}}
+          uuid={doc.uuid}
+        />
       </CardBody>
     </Card>
   );