Skip to content

Commit f435e64

Browse files
HaoyL666HaoyL666
committed
change kibernetes setup file flow, change grafana event chart to make it dynamic
1 parent 60933c4 commit f435e64

File tree

2 files changed

+90
-57
lines changed

2 files changed

+90
-57
lines changed

‎app/charts/GrafanaEventChart.tsx

Lines changed: 46 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,11 @@ interface EventChartProps {
2020
*/
2121
const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
2222
const { metricName, token } = props;
23-
const [graphType, setGraphType] = useState<string>("timeseries");
23+
const [graphType, setGraphType] = useState("timeseries");
24+
const [type, setType] = useState(['timeserie']);
2425
// const [solo, setSolo] = useState<SoloStyles | null>(null);
26+
console.log("graphType: ", graphType)
27+
console.log("type: ", type)
2528
console.log("inside GrafanaEventChart")
2629

2730
// setInterval(() => {
@@ -39,10 +42,13 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
3942
console.log("uid: ", uid)
4043
console.log("parsedName: ", parsedName)
4144

45+
let currentType;
46+
4247

4348

4449
const handleSelectionChange = async (event) => {
4550
//setGraphType(event.target.value);
51+
setType([...type, graphType]);
4652
await fetch('http://localhost:1111/api/updateDashboard', {
4753
method: 'POST',
4854
headers: {
@@ -57,27 +63,54 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
5763

5864
return (
5965
<div className="chart" data-testid="Grafana Event Chart">
60-
<h2>{parsedName}</h2>
61-
{/* create chart using grafana iframe tag*/}
62-
{graphType !== "timeseries" ? <> <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&panelId=1`} width="650" height="400" ></iframe>
66+
<h2>{`${parsedName} - ${graphType}`}</h2>
67+
<div>
6368
<select name="graphType" id="graphType" onChange={handleSelectionChange}>
6469
<option value="timeseries">Time Series</option>
6570
<option value="barchart">Bar Chart</option>
6671
<option value="stat">Stat</option>
6772
<option value="gauge">Gauge</option>
6873
<option value="table">Table</option>
6974
<option value="histogram">Histogram</option>
70-
</select></> : <><iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&panelId=1`} width="650" height="400" ></iframe>
71-
<select name="graphType" id="graphType" onChange={handleSelectionChange}>
72-
<option value="timeseries">Time Series</option>
73-
<option value="barchart">Bar Chart</option>
74-
<option value="stat">Stat</option>
75-
<option value="gauge">Gauge</option>
76-
<option value="table">Table</option>
77-
<option value="histogram">Histogram</option>
78-
</select> </>}
75+
</select>
76+
</div>
77+
{/* create chart using grafana iframe tag*/}
78+
{/* {type[type.length - 1] !== graphType ?
79+
<iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1`} width="650" height="400" ></iframe>
80+
: <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1`} width="650" height="400" ></iframe>} */}
81+
{graphType === "timeseries" ? TimeSeries(uid, parsedName, graphType) :
82+
graphType === "barchart" ? BarChart(uid, parsedName, graphType) :
83+
graphType === "stat" ? Stat(uid, parsedName, graphType) :
84+
graphType === "gauge" ? Gauge(uid, parsedName, graphType) :
85+
graphType === "table" ? Table(uid, parsedName, graphType) :
86+
graphType === "histogram" ? Histogram(uid, parsedName, graphType) :
87+
null}
88+
7989
</div>
8090
);
8191
});
8292

93+
const TimeSeries = (uid, parsedName, graphType) => {
94+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1&${graphType}`} width="650" height="400" ></iframe>
95+
}
96+
97+
const BarChart = (uid, parsedName, graphType) => {
98+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1${graphType}`} width="650" height="400" ></iframe>
99+
}
100+
101+
const Stat = (uid, parsedName, graphType) => {
102+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1${graphType}`} width="650" height="400" ></iframe>
103+
}
104+
105+
const Gauge = (uid, parsedName, graphType) => {
106+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1${graphType}`} width="650" height="400" ></iframe>
107+
}
108+
109+
const Table = (uid, parsedName, graphType) => {
110+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1${graphType}`} width="650" height="400" ></iframe>
111+
}
112+
113+
const Histogram = (uid, parsedName, graphType) => {
114+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1${graphType}`} width="650" height="400" ></iframe>
115+
}
83116
export default GrafanaEventChart;

‎chronos_npm_package/controllers/mongo.js

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -827,51 +827,51 @@ mongo.setQueryOnInterval = async config => {
827827

828828
console.log('currentMetricNames.length: ', Object.keys(currentMetricNames).length);
829829
// Use setInterval to send queries to metrics server and then pipe responses to database
830-
setInterval(() => {
831-
metricsQuery(config)
832-
// This updates the Metrics Model with all chosen metrics. If there are no chosen metrics it sets all available metrics as chosen metrics within the metrics model.
833-
.then(async parsedArray => {
834-
//await mongo.createGrafanaDashboards(config, parsedArray);
835-
console.log('parsedArray.length is: ', parsedArray.length);
836-
// This conditional would be used if new metrics are available to be tracked.
837-
if (length !== parsedArray.length) {
838-
// for (let metric of parsedArray) {
839-
// if (!(metric.metric in currentMetricNames)) {
840-
// await model.create(metric);
841-
// //currentMetricNames[metric] = true;
842-
// }
843-
// }
844-
length = await mongo.addMetrics(parsedArray, config.mode, currentMetricNames, model);
845-
}
846-
// const documents = [];
847-
// for (const metric of parsedArray) {
848-
// /**
849-
// * This will check if the current metric in the parsed array
850-
// * evaluates to true within the currentMetricNames object
851-
// * which is updated by the user when they select/deselect metrics on the electron app
852-
// * helping to avoid overloading the db with unnecessary data.
853-
// */
854-
855-
// if (currentMetricNames[metric.metric]) documents.push(model(metric));
856-
// }
857-
// await model.insertMany(parsedArray, err => {
858-
// if (err) {
859-
// console.error(err)
860-
// } else {
861-
// console.log(`${config.mode} metrics recorded in MongoDB`)
830+
// setInterval(() => {
831+
metricsQuery(config)
832+
// This updates the Metrics Model with all chosen metrics. If there are no chosen metrics it sets all available metrics as chosen metrics within the metrics model.
833+
.then(async parsedArray => {
834+
//await mongo.createGrafanaDashboards(config, parsedArray);
835+
console.log('parsedArray.length is: ', parsedArray.length);
836+
// This conditional would be used if new metrics are available to be tracked.
837+
if (length !== parsedArray.length) {
838+
// for (let metric of parsedArray) {
839+
// if (!(metric.metric in currentMetricNames)) {
840+
// await model.create(metric);
841+
// //currentMetricNames[metric] = true;
862842
// }
863-
// });
864-
let allMetrics = await model.find({});
865-
console.log('allMetrics.length: ', allMetrics.length);
866-
console.log("🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 start creating dashboards 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡")
867-
await mongo.createGrafanaDashboards(config, allMetrics);
868-
console.log("✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ finish creating dashboards ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅")
869-
})
870-
// .then(() => {
871-
// console.log(`${config.mode} metrics recorded in MongoDB`)
872-
// })
873-
.catch(err => console.log(`Error inserting ${config.mode} documents in MongoDB: `, err));
874-
}, 40000);
843+
// }
844+
length = await mongo.addMetrics(parsedArray, config.mode, currentMetricNames, model);
845+
}
846+
// const documents = [];
847+
// for (const metric of parsedArray) {
848+
// /**
849+
// * This will check if the current metric in the parsed array
850+
// * evaluates to true within the currentMetricNames object
851+
// * which is updated by the user when they select/deselect metrics on the electron app
852+
// * helping to avoid overloading the db with unnecessary data.
853+
// */
854+
855+
// if (currentMetricNames[metric.metric]) documents.push(model(metric));
856+
// }
857+
// await model.insertMany(parsedArray, err => {
858+
// if (err) {
859+
// console.error(err)
860+
// } else {
861+
// console.log(`${config.mode} metrics recorded in MongoDB`)
862+
// }
863+
// });
864+
let allMetrics = await model.find({});
865+
console.log('allMetrics.length: ', allMetrics.length);
866+
console.log("🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 start creating dashboards 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡 🟡")
867+
await mongo.createGrafanaDashboards(config, allMetrics);
868+
console.log("✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ finish creating dashboards ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅")
869+
})
870+
// .then(() => {
871+
// console.log(`${config.mode} metrics recorded in MongoDB`)
872+
// })
873+
.catch(err => console.log(`Error inserting ${config.mode} documents in MongoDB: `, err));
874+
// }, 40000);
875875
};
876876

877877
mongo.getSavedMetricsLength = async (mode, currentMetricNames) => {

0 commit comments

Comments
 (0)