I will get newjson_data which will have below data from backend.
- alert will have TimeStamp —> Epochformat,Type —> meeting,sso,api,account. Need to calculate count of each and every Type meeeting,sso,api,account and add it to the alert data –> Sent it to Metric Chart
- summary will have Acc, Sev, Summary, TimeStamp —> Using this data, I need create Table –> Sent it to Table Chart
- acc will have ACC_ID, TimeStamp, Type —> using this data, I need create TimeSeries, Also calculate count based on the TimeStamp and add it to the acc data
I am able to see data in the console under const filterAPICall but not able render it
mport "@elastic/eui/dist/eui_theme_light.css";
import ReactDOM from "react-dom";
import React, { Fragment } from "react";
import createCache from "@emotion/cache";
import {
EuiProvider,
EuiSpacer,
EuiTabbedContent,
EuiTitle,
EuiText,
} from "@elastic/eui";
import { Header } from "./components/Header";
import { Datetime } from "./components/Datetime";
import { MetricChart } from "./components/MetricChart";
import { TimeChart } from "./components/TimeChart";
import { TableChart } from "./components/TableChart";
import axios from "axios";
const cache = createCache({
key: "codesandbox",
container: document.querySelector('meta[name="emotion-styles"]'),
});
cache.compat = true;
//const data = require("./alert_collection1.json");
//const newjson_data = require("./new_json_backend.json");
//console.log("New data is :", newjson_data.data);
//console.log("Old data is :", data);
let newjson_data;
//API call
const filterAPICall = (startTime, endTime, keyword) => {
console.log("Datetime variables are", startTime, endTime);
//let baseURL = 'http://127.0.0.1:5000/getdata?startTime=${startTime}&endTime=${endTime}&keyword=${keyword}';
let baseURL = `https://XXX.XXX:8000/api/data?start=${startTime}&end=${endTime}&keyword=${keyword}`;
const headers = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "POST, GET, PUT",
"Access-Control-Allow-Headers": "Content-Type",
};
axios
.get(baseURL, {
headers,
})
.then((response) => {
// setPost(response.data);
newjson_data = response.data;
console.log("API call data is:", newjson_data);
let meetingseries = {};
let accountseries = {};
let ssoseries = {};
let apiseries = {};
let tempsummary = [];
let tempstatistics = {};
if (newjson_data) {
for (let i = 0; i < newjson_data.data.length; i = i + 1) {
let keys = Object.keys(newjson_data.data[i]);
//Create data set for Meeting alerts.
if (
keys.includes("alert") &&
newjson_data.data[i]["alert"]["Type"] === "meeting"
) {
let temp = meetingseries;
if (
Object.keys(newjson_data.data[i]["alert"]).includes("TimeStamp")
) {
//let datetime =
// newjson_data.data[i]["alert"]["Date"] +
// "T" +
// newjson_data.data[i]["alert"]["Time"];
//let epochtime = Number(new Date(data[i]["alert"]["Day"] + "T" + data[i]["alert"]["Time"]));
let epochTime = newjson_data.data[i]["alert"]["TimeStamp"];
let datetime = new Date(epochTime * 1000).toISOString();
if (Object.keys(temp).length === 0) {
temp[datetime] = {};
temp[datetime] = newjson_data.data[i]["alert"];
temp[datetime]["count"] = 1;
temp[datetime]["datetime"] = datetime;
} else {
if (Object.keys(temp).includes(datetime)) {
temp[datetime]["count"]++;
} else {
temp[datetime] = newjson_data.data[i]["alert"];
temp[datetime]["count"] = 1;
temp[datetime]["datetime"] = datetime;
}
}
meetingseries = temp;
//console.log("meetingseries-->", meetingseries);
}
}
//Create data set for Account alerts.
if (
keys.includes("alert") &&
newjson_data.data[i]["alert"]["Type"] === "account"
) {
let temp = accountseries;
if (
Object.keys(newjson_data.data[i]["alert"]).includes("TimeStamp")
) {
let epochTime = newjson_data.data[i]["alert"]["TimeStamp"];
let datetime = new Date(epochTime * 1000).toISOString();
//let epochtime = Number(new Date(data[i]["alert"]["Day"] + "T" + data[i]["alert"]["Time"]));
if (Object.keys(temp).length === 0) {
temp[datetime] = {};
temp[datetime] = newjson_data.data[i]["alert"];
temp[datetime]["count"] = 1;
temp[datetime]["datetime"] = datetime;
} else {
if (Object.keys(temp).includes(datetime)) {
temp[datetime]["count"]++;
} else {
temp[datetime] = newjson_data.data[i]["alert"];
temp[datetime]["count"] = 1;
temp[datetime]["datetime"] = datetime;
}
}
accountseries = temp;
//console.log("accountseries-->", accountseries);
}
}
//Create data set for SSO alerts.
if (
keys.includes("alert") &&
newjson_data.data[i]["alert"]["Type"] === "SSO"
) {
let temp = ssoseries;
if (Object.keys(newjson_data.data[i]["alert"]).includes("Date")) {
let epochTime = newjson_data.data[i]["alert"]["TimeStamp"];
let datetime = new Date(epochTime * 1000).toISOString();
//let epochtime = Number(new Date(data[i]["alert"]["Day"] + "T" + data[i]["alert"]["Time"]));
if (Object.keys(temp).length === 0) {
temp[datetime] = {};
temp[datetime] = newjson_data.data[i]["alert"];
temp[datetime]["count"] = 1;
temp[datetime]["datetime"] = datetime;
} else {
if (Object.keys(temp).includes(datetime)) {
temp[datetime]["count"]++;
} else {
temp[datetime] = newjson_data.data[i]["alert"];
temp[datetime]["count"] = 1;
temp[datetime]["datetime"] = datetime;
}
}
ssoseries = temp;
//console.log("ssoseries-->", ssoseries);
}
}
//Create data set for API alerts.
if (
keys.includes("alert") &&
newjson_data.data[i]["alert"]["Type"] === "API"
) {
let temp = apiseries;
if (Object.keys(newjson_data.data[i]["alert"]).includes("Date")) {
let epochTime = newjson_data.data[i]["alert"]["TimeStamp"];
let datetime = new Date(epochTime * 1000).toISOString();
//let epochtime = Number(new Date(data[i]["alert"]["Day"] + "T" + data[i]["alert"]["Time"]));
if (Object.keys(temp).length === 0) {
temp[datetime] = {};
temp[datetime] = newjson_data.data[i]["alert"];
temp[datetime]["count"] = 1;
temp[datetime]["datetime"] = datetime;
} else {
if (Object.keys(temp).includes(datetime)) {
temp[datetime]["count"]++;
} else {
temp[datetime] = newjson_data.data[i]["alert"];
temp[datetime]["count"] = 1;
temp[datetime]["datetime"] = datetime;
}
}
apiseries = temp;
//console.log("apiseries-->", apiseries);
}
}
//Creating summary data [2nd part] from json
else if (keys.includes("summary")) {
let temp = newjson_data.data[i]["summary"];
let epochTime = newjson_data.data[i]["summary"]["TimeStamp"];
let datetime = new Date(epochTime * 1000).toISOString();
temp["datetime"] = datetime;
//temp["id"] = newjson_data.data[i]["_id"]["$oid"];
tempsummary = [...tempsummary, temp];
}
//Creating statistics data [1st part] from json
else if (keys.includes("acc")) {
let temp = tempstatistics;
//console.log(temp);
//Initialising all values to 0 initially
if (Object.keys(temp).length === 0) {
//console.log("temp", newjson_data.data[i]);
temp["Meeting"] = {};
temp["Meeting"]["count"] = 0;
temp["account"] = {};
temp["account"]["count"] = 0;
temp["API"] = {};
temp["API"]["count"] = 0;
temp["SSO"] = {};
temp["SSO"]["count"] = 0;
//temp[newjson_data.data[i]["acc"]["Type"]]["count"] = 1;
} else {
if (
Object.keys(temp).includes(newjson_data.data[i]["acc"]["Type"])
) {
temp[newjson_data.data[i]["acc"]["Type"]]["count"]++;
} else {
temp[newjson_data.data[i]["acc"]["Type"]] = {};
temp[newjson_data.data[i]["acc"]["Type"]]["count"] = 1;
}
}
tempstatistics = temp; //Stores staistsics data as dictionary with the count of meeting, Account, API, SSO related alerts.
//console.log("te--<", tempstatistics);
}
}
}
console.log("Meeting series is: ", meetingseries);
console.log("Account series is:", accountseries);
console.log("SSO series is:", ssoseries);
console.log("API series is:", apiseries);
let Barchartdata = [];
const meetinglen = Object.keys(meetingseries).length;
const accountlen = Object.keys(accountseries).length;
const ssolen = Object.keys(ssoseries).length;
const apilen = Object.keys(apiseries).length;
//Combining all the alert data related to bar chart into one single dictionary.
for (let i = 0; i < meetinglen; i++) {
let tempMeetingarray = [];
tempMeetingarray["DateTime"] =
Object.values(meetingseries)[i]["datetime"];
tempMeetingarray["Countbar"] = Object.values(meetingseries)[i]["count"];
tempMeetingarray["Type"] = "Meeting";
Barchartdata[i] = tempMeetingarray;
}
for (let i = 0; i < accountlen; i++) {
let tempAccountarray = [];
tempAccountarray["DateTime"] =
Object.values(accountseries)[i]["datetime"];
tempAccountarray["Countbar"] = Object.values(accountseries)[i]["count"];
tempAccountarray["Type"] = "account";
Barchartdata[i + meetinglen] = tempAccountarray;
}
for (let i = 0; i < ssolen; i++) {
let tempSSOarray = [];
tempSSOarray["DateTime"] = Object.values(ssoseries)[i]["datetime"];
tempSSOarray["Countbar"] = Object.values(ssoseries)[i]["count"];
tempSSOarray["Type"] = "SSO";
Barchartdata[i + meetinglen + accountlen] = tempSSOarray;
}
for (let i = 0; i < apilen; i++) {
let tempAPIarray = [];
tempAPIarray["DateTime"] = Object.values(apiseries)[i]["datetime"];
tempAPIarray["Countbar"] = Object.values(apiseries)[i]["count"];
tempAPIarray["Type"] = "API";
Barchartdata[i + meetinglen + accountlen + ssolen] = tempAPIarray;
}
//console.log("Bar chart data is:", Barchartdata);
//console.log("Summary data is:", tempsummary);
//console.log("Metric data is:", tempstatistics);
})
.catch((error) => {
console.log(error);
});
};
/*console.log("Whole time series is: ",temptimeseries);
console.log("Summary data is: ",tempsummary);
console.log("Statistics data is: ", tempstatistics);
console.log("Time series data is: ", Object.values(temptimeseries)[0]['count']);
console.log("Length is : ", Object.keys(temptimeseries).length);*/
//console.log(tempdata);
const Demo = () => {
const tabs = [
{
id: "web--id",
name: "WEB monitoring ",
content: (
<Fragment>
<EuiProvider cache={cache}>
<Datetime filterAPICall={filterAPICall} />
<EuiSpacer size="xxl" />
<MetricChart tempstatistics={tempstatistics} />
<TimeChart Barchartdata={Barchartdata} />
<EuiSpacer size="xxl" />
<TableChart tempsummary={tempsummary} />
</EuiProvider>
,
</Fragment>
),
},
{
id: "ZR--id",
name: "ZR-CRC Monitoring",
content: (
<Fragment>
<EuiSpacer />
<EuiTitle>
<h3>ZR-CRC Monitoring</h3>
</EuiTitle>
<EuiSpacer size="xxl" />
<EuiText>Please add the required components in this tab.</EuiText>
</Fragment>
),
},
];
return (
<EuiTabbedContent
tabs={tabs}
initialSelectedTab={tabs[0]}
autoFocus="selected"
onTabClick={(tab) => {
console.log("clicked tab", tab);
}}
/>
);
};
ReactDOM.render(
<EuiProvider cache={cache}>
<Header />
<Datetime filterAPICall={filterAPICall} />
{/* only render if we have data */}
{newjson_data && (
<Fragment>
<MetricChart tempstatistics={tempstatistics} />
<TimeChart />
<TableChart />
</Fragment>
)}
</EuiProvider>,
document.getElementById("root")
);
Need to fix rendering issue