|
| 1 | +import React, { useEffect, useState, useContext } from 'react'; |
| 2 | +import { HealthContext } from '../context/HealthContext'; |
| 3 | +import { QueryContext } from '../context/QueryContext'; |
| 4 | +import GrafanaEventChart from '../charts/GrafanaEventChart'; |
| 5 | +import { Button } from '@material-ui/core'; |
| 6 | +import { useParams } from 'react-router-dom'; |
| 7 | + |
| 8 | +interface HealthContainerProps { |
| 9 | + sizing: string; |
| 10 | + colourGenerator: Function; |
| 11 | + category: string; |
| 12 | + //currentService: string; |
| 13 | +} |
| 14 | + |
| 15 | +interface Params { |
| 16 | + service: string; |
| 17 | +} |
| 18 | + |
| 19 | +interface DataObject { |
| 20 | + [key: string]: { |
| 21 | + value: string[], |
| 22 | + time: string[], |
| 23 | + id: string, |
| 24 | + token: string |
| 25 | + }; |
| 26 | +} |
| 27 | +interface DockerDataObject { |
| 28 | + [key: string]: DataObject |
| 29 | +} |
| 30 | + |
| 31 | +const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props => { |
| 32 | + const { healthData } = useContext(HealthContext); |
| 33 | + const { selectedMetrics } = useContext(QueryContext); |
| 34 | + const { service } = useParams<keyof Params>() as Params; |
| 35 | + const [healthChartsArr, setHealthChartsArr] = useState<JSX.Element[]>([]); |
| 36 | + const { sizing, colourGenerator, category } = props; |
| 37 | + const [currIndex, setCurrIndex] = useState(0); |
| 38 | + const [currChunk, setCurrChunk] = useState<JSX.Element[]>([]); |
| 39 | + const chunkSize = 7; |
| 40 | + let [isGrafana, setIsGrafana] = useState(false); |
| 41 | + /** |
| 42 | + * This function filters the selectedMetrics array down to only metrics that match the category of this instance of HealthContainer. |
| 43 | + * Once that has finished, it then filters the healthData down to the current category and the filteredMetrics. |
| 44 | + */ |
| 45 | + |
| 46 | + function nextChunk() { |
| 47 | + const nextChunk = healthChartsArr.slice(currIndex, currIndex + chunkSize); |
| 48 | + setCurrChunk(nextChunk); |
| 49 | + setCurrIndex(currIndex + chunkSize); |
| 50 | + } |
| 51 | + function prevChunk() { |
| 52 | + const prevChunk = healthChartsArr.slice(currIndex - 2 * chunkSize, currIndex - chunkSize); |
| 53 | + setCurrChunk(prevChunk); |
| 54 | + setCurrIndex(currIndex - chunkSize); |
| 55 | + } |
| 56 | + |
| 57 | + const filterSelectedMetricsAndHealthData = (): DockerDataObject => { |
| 58 | + // define a filtered health data object for output |
| 59 | + // define an array of filteredMetricNames for later use |
| 60 | + const filteredHealthData = {}; |
| 61 | + const filteredMetricNames: string[] = []; |
| 62 | + // iterate over the selectedMetrics from QueryContext |
| 63 | + selectedMetrics.forEach(metricObj => { |
| 64 | + // due to the way the data is stored, each metricObj has a key of category, and an array of selected metrics as a value |
| 65 | + const metricCategory = Object.keys(metricObj)[0]; |
| 66 | + const metricValuesArray = metricObj[metricCategory]; |
| 67 | + // if the current metricObj's category matches our instance's current category, iterate through its array of values |
| 68 | + if (metricCategory === category) { |
| 69 | + metricValuesArray.forEach(metricName => { |
| 70 | + filteredMetricNames.push(metricName); // add the metricNames to the filteredMetricNames array |
| 71 | + }); |
| 72 | + } |
| 73 | + }); |
| 74 | + /* |
| 75 | + Now that we've defined which of the user's selected metrics belong in this category, iterate over the healthData object |
| 76 | + and filter it down to the selected category and metrics. |
| 77 | + */ |
| 78 | + for (const service in healthData) { |
| 79 | + filteredHealthData[service] = {}; |
| 80 | + const categoryObjects = healthData[service]; |
| 81 | + for (const categoryName in categoryObjects) { |
| 82 | + // if the category in healthData matches the category passed down to this HealthContainer, iterate over the related metrics |
| 83 | + if (categoryName === category) { |
| 84 | + const metricObjects = categoryObjects[categoryName]; |
| 85 | + for (const metric in metricObjects) { |
| 86 | + // if the metric title matches any element in the filtered metrics array, add the metric serviceName to the filteredHealthData object, then add the metrics for that service |
| 87 | + if (filteredMetricNames.includes(metric)) { |
| 88 | + filteredHealthData[service][metric] = metricObjects[metric]; |
| 89 | + } |
| 90 | + } |
| 91 | + } |
| 92 | + } |
| 93 | + } |
| 94 | + return filteredHealthData; |
| 95 | + }; |
| 96 | + |
| 97 | + // helper function for geting only the names of the metrics |
| 98 | + const getIndex = (str: string, substr: string, ind: number): number => { |
| 99 | + let Len = str.length, |
| 100 | + i = -1; |
| 101 | + while (ind-- && i++ < Len) { |
| 102 | + i = str.indexOf(substr, i); |
| 103 | + if (i < 0) break; |
| 104 | + } |
| 105 | + return i; |
| 106 | + } |
| 107 | + |
| 108 | + // function to generate charts using the type-sorted data |
| 109 | + const generateHealthCharts = (sortedData: DockerDataObject): void => { |
| 110 | + //onst chartsArray: JSX.Element[] = []; |
| 111 | + const grafanaChartsArray: JSX.Element[] = []; |
| 112 | + //let parsedName: string = ''; |
| 113 | + const keymaker = () => { |
| 114 | + return Math.floor(Math.random() * 1000); |
| 115 | + }; |
| 116 | + // iterate over the sortedData and create a chart for each data type and each service of that data |
| 117 | + for (const dataType in sortedData) { |
| 118 | + const metricObjects = sortedData[service]; |
| 119 | + for (const metricName in metricObjects) { |
| 120 | + // pass down the value of the current data type and service |
| 121 | + const chartData = metricObjects[metricName]; |
| 122 | + const token = chartData.token; |
| 123 | + // chartsArray.push( |
| 124 | + // <HealthChart |
| 125 | + // key={'H' + keymaker()} |
| 126 | + // dataType={dataType} |
| 127 | + // serviceName={serviceName} |
| 128 | + // chartData={chartData} |
| 129 | + // categoryName={category} |
| 130 | + // sizing={sizing} |
| 131 | + // colourGenerator={colourGenerator} |
| 132 | + // /> |
| 133 | + // ); |
| 134 | + console.log("plotting grafana") |
| 135 | + grafanaChartsArray.push( |
| 136 | + <GrafanaEventChart metricName={metricName} token={token} />); |
| 137 | + |
| 138 | + } |
| 139 | + } |
| 140 | + console.log(grafanaChartsArray) |
| 141 | + setHealthChartsArr(grafanaChartsArray); |
| 142 | + setCurrChunk(grafanaChartsArray.slice(currIndex, currIndex + chunkSize)); |
| 143 | + setCurrIndex(currIndex + chunkSize); |
| 144 | + }; |
| 145 | + |
| 146 | + useEffect(() => { |
| 147 | + // returns an object containing only the healthData for the current category and the metrics the User selected |
| 148 | + const filteredHealthData = filterSelectedMetricsAndHealthData(); |
| 149 | + // returns an object containing the filtered data sorted by data type |
| 150 | + //const typeSortedHealthData = healthDataGroupedByDataType(filteredHealthData); |
| 151 | + // invoking generateCharts with the sorted data will update healthChartsArr in state with the list of charts to be rendered |
| 152 | + generateHealthCharts(filteredHealthData); |
| 153 | + }, [category]); |
| 154 | + |
| 155 | + // JJ-ADDITION |
| 156 | + return ( |
| 157 | + <div> |
| 158 | + {/* <div id="grafana" onClick={() => { setIsGrafana(!isGrafana) }}>Grafana</div> */} |
| 159 | + {service.includes('kafkametrics') || service.includes('kubernetesmetrics') || service.includes('books') || service.includes('customers') || service.includes('frontend') || service.includes('orders')? currChunk : []} |
| 160 | + {healthChartsArr.length > chunkSize && ( |
| 161 | + <> |
| 162 | + <Button id="prevCharts" onClick={prevChunk} variant="contained" color="primary" disabled={currIndex <= chunkSize}> |
| 163 | + Prev |
| 164 | + </Button> |
| 165 | + <Button id="nextCharts" onClick={nextChunk} variant="contained" color="primary" disabled={currIndex >= healthChartsArr.length}> |
| 166 | + Next |
| 167 | + </Button> |
| 168 | + </> |
| 169 | + )} |
| 170 | + </div> |
| 171 | + ); |
| 172 | +}); |
| 173 | + |
| 174 | +export default DockerHealthContainer; |
0 commit comments