Merge pull request #97 from vishnuchalla/telco-frontend

Telco frontend

Author: chentex

backend/app/api/v1/commons/example_responses.py

@@ -124,17 +124,21 @@ def response_422():
     "endDate": "2023-09-20",
     "results": [
         {
+            "uuid": "4de79cb7a1b071bce282e8d0ce2006c7",
+            "encryptedData": "gAAAAABmR0NYcO6AZo4nGjkT1IBVeoD=",
             "ciSystem": "Jenkins",
-            "uuid": "2cc5d4ca895ca5d84cab0fd7923db93b",
-            "encrypted": "gAAAAABmQALtP0g5UPMsOjQw46tZ-aBz77yl-8QNI4jwLfIEV1POnOlA1ny89cp3Nrik3OzpNwXrWO3K4ZwtOliTfk0SO5NkNZHY8reJhvOVJBGFEw2enyjRaHp9hIaJdE0Vrfuqt_NjiYX-vOZo0Sjc84R76LvxjAC6f_urceGGZICH36IkT2g=",
-            "releaseStream": "Release Candidate",
-            "jobStatus": "success",
+            "benchmark": "deployment",
+            "shortVersion": "4.16",
+            "ocpVersion": "4.16.0-0.nightly-2024-05-16-092402",
+            "releaseStream": "Nightly",
+            "nodeName": "kni-qe-66",
+            "cpu": "Intel(R) Xeon? Gold 5423N",
+            "formal": "true",
+            "startDate": "2024-05-16 19:39:48+00:00",
+            "endDate": "2024-05-16 20:41:48+00:00",
             "buildUrl": "https://ci-jenkins-xxx.com/job/your-tests/532",
-            "startDate": "2024-05-09 14:10:51+00:00",
-            "endDate": "2024-05-09 14:43:51+00:00",
-            "product": "telco",
-            "version": "4.16",
-            "testName": "reboot"
+            "jobStatus": "success",
+            "jobDuration": 3720
         },
     ]
 }

backend/app/api/v1/commons/telco.py

@@ -4,6 +4,7 @@
 from app.services.splunk import SplunkService
 import app.api.v1.commons.hasher as hasher
 from datetime import datetime, timezone
+import app.api.v1.commons.utils as utils
 
 
 async def getData(start_datetime: date, end_datetime: date, configpath: str):
@@ -40,18 +41,25 @@ async def getData(start_datetime: date, end_datetime: date, configpath: str):
         start_timestamp = end_timestamp - execution_time_seconds
         start_time_utc = datetime.fromtimestamp(start_timestamp, tz=timezone.utc)
         end_time_utc = datetime.fromtimestamp(end_timestamp, tz=timezone.utc)
+        kernel = test_data['kernel'] if 'kernel' in test_data else "Undefined"
 
         mapped_list.append({
             "uuid": hash_digest,
             "encryptedData": encrypted_data.decode('utf-8'),
             "ciSystem": "Jenkins",
-            "testName": test_data['test_type'],
-            "version": test_data['ocp_version'],
-            "releaseStream": test_data['ocp_build'],
+            "benchmark": test_data['test_type'],
+            "kernel": kernel,
+            "shortVersion": test_data['ocp_version'],
+            "ocpVersion": test_data['ocp_build'],
+            "releaseStream": utils.getReleaseStream({'releaseStream': test_data['ocp_build']}),
+            "nodeName": test_data['node_name'],
+            "cpu": test_data['cpu'],
+            'formal': test_data['formal'],
             "startDate": str(start_time_utc),
             "endDate": str(end_time_utc),
-            "buildUrl": jenkins_url + "/" + str(test_data['cluster_artifacts']['ref']['jenkins_build']),
-            "jobStatus": "success"
+            "buildUrl": jenkins_url + str(test_data['cluster_artifacts']['ref']['jenkins_build']),
+            "jobStatus": "success",
+            "jobDuration": execution_time_seconds,
         })
 
     jobs = pd.json_normalize(mapped_list)

backend/app/api/v1/endpoints/cpt/maps/telco.py

@@ -10,4 +10,6 @@ async def telcoMapper(start_datetime: date, end_datetime: date):
     df = await getData(start_datetime, end_datetime, f'telco.splunk')
     df.insert(len(df.columns), "product", "telco")
     df["releaseStream"] = df.apply(getReleaseStream, axis=1)
+    df["version"] = df["shortVersion"]
+    df["testName"] = df["benchmark"]
     return df

frontend/public/assets/images/splunk-icon.png

@@ -6,13 +6,14 @@ import {
     PageSection,
     PageSectionVariants,
 } from '@patternfly/react-core';
-import {fetchOCPJobsData, fetchCPTJobsData, fetchQuayJobsData} from "./store/Actions/ActionCreator";
+import {fetchOCPJobsData, fetchCPTJobsData, fetchQuayJobsData, fetchTelcoJobsData} from "./store/Actions/ActionCreator";
 import {useDispatch} from "react-redux";
 import {Route, Switch, BrowserRouter as Router} from "react-router-dom";
 import {NavBar} from "./components/NavBar/NavBar";
 import {HomeView} from "./components/Home/HomeView";
 import {OCPHome} from './components/OCP/OCPHome';
 import {QuayHome} from './components/Quay/QuayHome';
+import {TelcoHome} from './components/Telco/TelcoHome';
 
 
 export const App = () => {
@@ -23,6 +24,7 @@ export const App = () => {
               await dispatch(fetchOCPJobsData())
               await dispatch(fetchCPTJobsData())
               await dispatch(fetchQuayJobsData())
+              await dispatch(fetchTelcoJobsData())
           }
           fetchData()
     }, [dispatch])
@@ -45,6 +47,7 @@ export const App = () => {
                   <Route path="/home"><HomeView /></Route>
                   <Route path="/ocp"><OCPHome /></Route>
                   <Route path="/quay"><QuayHome /></Route>
+                  <Route path="/telco"><TelcoHome /></Route>
               </Switch>
           </PageSection>
         </Page>

frontend/src/App.js

@@ -23,9 +23,10 @@ export const ToolBar = () => {
     return styles;
   };
 
-  // Selectors for both ocpJobs and quayJobs
+  // Selectors for OCP, Quay and Telco jobs
   const ocpJobResults = useSelector((state) => state.ocpJobs);
   const quayJobResults = useSelector((state) => state.quayJobs);
+  const telcoJobResults = useSelector((state) => state.telcoJobs);
 
   const NavItems = (
     <>
@@ -45,7 +46,6 @@ export const ToolBar = () => {
           onClick={() => setActive("/ocp")}
         />
       </ToolbarItem>
-      {/* New Quay ToolbarItem */}
       <ToolbarItem>
         <Link
           to="/quay"
@@ -54,6 +54,14 @@ export const ToolBar = () => {
           onClick={() => setActive("/quay")}
         />
       </ToolbarItem>
+      <ToolbarItem>
+        <Link
+          to="/telco"
+          children={"Telco"}
+          style={linkStyle("/telco")}
+          onClick={() => setActive("/telco")}
+        />
+      </ToolbarItem>
     </>
   );
 
@@ -70,7 +78,11 @@ export const ToolBar = () => {
             <Text4
               style={{ color: "#FFFFFF" }}
               value={`Last Updated Time | ${
-                active === "/ocp" ? ocpJobResults.updatedTime : quayJobResults.updatedTime
+                active === "/ocp"
+                  ? ocpJobResults.updatedTime
+                  : active === "/quay"
+                  ? quayJobResults.updatedTime
+                  : telcoJobResults.updatedTime
               }`}
             />
           </ToolbarItem>

frontend/src/components/NavBar/ToolBar.js

@@ -0,0 +1,21 @@
+import {Grid, GridItem} from "@patternfly/react-core";
+import InstallCard from "./InstallCard";
+import React from "react";
+import {DisplayGraph} from "./DisplayGraph";
+
+
+export const BenchmarkResults = ({dataset, isExpanded}) => {
+    return (
+        <> {
+            ( isExpanded &&
+                <Grid className='demoCard' hasGutter>
+                    <GridItem span={"6"}>
+                      <InstallCard data={ dataset }
+                                   isExpanded={isExpanded} />
+                    </GridItem>
+                </Grid>
+            ) || <>NO Data</>
+        }
+        </>
+    )
+}

frontend/src/components/Telco/BenchmarkResults.js

@@ -0,0 +1,38 @@
+import {PlotlyView} from "../ReactGraphs/plotly/PlotlyView";
+import React, {useEffect} from "react";
+import {useDispatch, useSelector} from "react-redux";
+import CardView from "../PatternflyComponents/Card/CardView";
+import {Text6} from "../PatternflyComponents/Text/Text";
+import {SplitView} from "../PatternflyComponents/Split/SplitView";
+import {Spinner} from "@patternfly/react-core";
+import {fetchGraphData} from "../../store/Actions/ActionCreator";
+
+
+export const DisplayGraph = ({uuid, benchmark}) => {
+
+    const [isExpanded, setExpanded] = React.useState(true)
+    const onExpand = () => setExpanded(!isExpanded)
+
+    const dispatch = useDispatch()
+    const job_results = useSelector(state => state.graph)
+    const graphData = job_results.uuid_results[uuid]
+
+    useEffect(() => {
+            dispatch(fetchGraphData(uuid))
+    }, [dispatch, uuid])
+
+    const getGraphBody = () => {
+        return (job_results.graphError && <Text6 value={job_results.graphError}/>) ||
+               (graphData && <PlotlyView data={graphData} />) ||
+               <SplitView splitValues={[<Spinner issvg={"true"} />, <Text6 value="Awaiting Results"/>]} />
+    }
+
+    return <>
+            <CardView header={(benchmark && benchmark) || <Text6 value={"Graph Result"} />}
+                      body={ getGraphBody() }
+                      isExpanded={isExpanded}
+                      expandView={true}
+                      onExpand={onExpand}
+            />
+        </>
+}

frontend/src/components/Telco/DisplayGraph.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter, CardHeader, CardExpandableContent } from '@patternfly/react-core';
+import { Grid, GridItem } from '@patternfly/react-core';
+import { Spinner } from '@patternfly/react-core';
+import { formatTime } from '../../helpers/Formatters'
+import { FaCheck, FaExclamationCircle,  FaExclamationTriangle } from "react-icons/fa";
+import { DisplaySplunk } from '../commons/DisplaySplunk';
+
+
+export default function InstallCard(props) {
+    let config = props.data
+    const [isExpanded, setExpanded] = React.useState([true, null])
+
+
+    const onExpand = () => {
+        setExpanded(!isExpanded)
+    };
+
+      const icons = {
+        "failed": <><FaExclamationCircle color="red"/></>,
+        "success": <><FaCheck color="green"/></>,
+        "upstream_failed": <><FaExclamationTriangle color="yellow"/></>,
+
+    }
+
+    if (config) {
+        return (
+        <Card isExpanded={isExpanded}>
+            <CardHeader
+          onExpand={onExpand}
+          toggleButtonProps={{
+            id: 'toggle-button',
+            'aria-label': 'Details',
+            'aria-labelledby': 'titleId toggle-button',
+            'aria-expanded': isExpanded
+          }}
+        >
+                <CardTitle>Configs</CardTitle>
+
+            </CardHeader>
+            <CardExpandableContent>
+            <CardBody>
+                <Grid>
+                    <GridItem rowSpan="1">
+                        <Card><CardHeader><CardTitle>Cluster Metadata</CardTitle></CardHeader>
+                            <CardBody>
+                            <ul>
+                                <li><span class="list-item-key">Release Binary</span>: {config.cluster_version  && config.cluster_version || config.ocpVersion}</li>
+                                <li><span class="list-item-key">Cluster Name</span>: {config.cluster_name && config.cluster_name || config.nodeName}</li>
+                                <li><span class="list-item-key">Cluster Type</span>: {config.cluster_type  && config.cluster_type || "SNO spoke"}</li>
+                                <li><span class="list-item-key">Network Type</span>: {config.network_type  && config.network_type || "OVNKubernetes"}</li>
+                                <li><span class="list-item-key">CPU</span>: {config.cpu_version  && config.cpu_version || config.cpu}</li>
+                                <li><span class="list-item-key">Kernel</span>: {config.kernel_version  && config.kernel_version || config.kernel}</li>
+                                <li><span class="list-item-key">IsFormal</span>: {config.is_formal  && config.is_formal || config.formal}</li>
+                                <li><span class="list-item-key">Benchmark Status</span>: {icons[config.job_status  && config.job_status || config.jobStatus] || config.job_status  && config.job_status || config.jobStatus}</li>
+                                <li><span class="list-item-key">Duration</span>: {formatTime(config.job_duration  && config.job_duration || config.jobDuration)}</li>
+                            </ul>
+                            </CardBody>
+                        </Card>
+                    </GridItem>
+                    <DisplaySplunk benchmarkConfigs={ config } />
+                    <GridItem span="6">
+                        <Card><CardHeader><CardTitle>Node Types</CardTitle></CardHeader>
+                            <CardBody>
+                            <ul>
+                                <li><span class="list-item-key">Master</span>: {config.master_type  && config.master_type || "Baremetal"}</li>
+                                <li><span class="list-item-key">Workload</span>: {config.workload_type && config.workload_type || config.benchmark}</li>
+                            </ul>
+                            </CardBody>
+                        </Card>
+                    </GridItem>
+                    <GridItem span="6">
+                        <Card><CardHeader><CardTitle>Node Counts</CardTitle></CardHeader>
+                            <CardBody>
+                            <ul>
+                                <li><span class="list-item-key">Master</span>: {config.master_count  && config.master_count || "1"}</li>
+                                <li><span class="list-item-key">Total Nodes</span>: {config.workload_count  && config.workload_count || "1"}</li>
+                            </ul>
+                            </CardBody>
+                        </Card>
+                    </GridItem>
+                </Grid>
+            </CardBody></CardExpandableContent>
+
+
+        </Card>)
+    } else {
+        return (
+            <Card>
+            <CardTitle>Install Configuration</CardTitle>
+            <CardBody><Spinner isSVG /><br />Awaiting Results</CardBody>
+            <CardFooter></CardFooter>
+          </Card>
+        )
+    }
+
+}