Frontend fixes for release
This commit is contained in:
Frikky
@@ -50,6 +50,7 @@ const AppSelection = props => {
|
||||
const [newSelectedApp, setNewSelectedApp] = React.useState({})
|
||||
const [finishedApps, setFinishedApps] = React.useState([])
|
||||
const [appButtons, setAppButtons] = useState([])
|
||||
const [lastPosted, setLastPosted] = useState([])
|
||||
const [apps, setApps] = useState([])
|
||||
const [appName, setAppName] = React.useState();
|
||||
const [moreButton, setMoreButton] = useState(false);
|
||||
@@ -75,7 +76,7 @@ const AppSelection = props => {
|
||||
body: JSON.stringify(data),
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
.then(async (response) => {
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for framework!");
|
||||
}
|
||||
@@ -84,7 +85,13 @@ const AppSelection = props => {
|
||||
checkLogin()
|
||||
}
|
||||
|
||||
return response.json();
|
||||
let resp = response.json();
|
||||
let respAwaited = await resp;
|
||||
|
||||
if (respAwaited.success === true) {
|
||||
setLastPosted(data)
|
||||
}
|
||||
return resp;
|
||||
})
|
||||
.then((responseJson) => {
|
||||
if (responseJson.success === false) {
|
||||
@@ -153,7 +160,6 @@ const AppSelection = props => {
|
||||
// if (setDiscoveryWrapper !== undefined) {
|
||||
// setDiscoveryWrapper({ id: label });
|
||||
// }
|
||||
|
||||
if (isCloud) {
|
||||
ReactGA.event({
|
||||
category: "welcome",
|
||||
@@ -161,41 +167,13 @@ const AppSelection = props => {
|
||||
label: "",
|
||||
});
|
||||
}
|
||||
|
||||
setDiscoveryData(label)
|
||||
setSelectionOpen(true)
|
||||
setNewSelectedApp({})
|
||||
setDefaultSearch(label.charAt(0).toUpperCase() + (label.substring(1)).toLowerCase())
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
var tempApps = []
|
||||
if (tempApps.length === 0) {
|
||||
const tempApps =
|
||||
[{
|
||||
"description": newSelectedApp.description,
|
||||
"id": newSelectedApp.objectID,
|
||||
"large_image": newSelectedApp.image_url,
|
||||
"name": newSelectedApp.name,
|
||||
"type": discoveryData
|
||||
},
|
||||
//{
|
||||
// // description: newSelectedApp.siem.description,
|
||||
// id: newSelectedApp.siem.objectID,
|
||||
// large_image: newSelectedApp.siem.image_url,
|
||||
// name: newSelectedApp.siem.name,
|
||||
// type: discoveryData.siem
|
||||
// },{
|
||||
// // description: newSelectedApp.edr.description,
|
||||
// id: newSelectedApp.edr.objectID,
|
||||
// large_image: newSelectedApp.edr.image_url,
|
||||
// name: newSelectedApp.edr.name,
|
||||
// type: discoveryData.edr
|
||||
// }
|
||||
]
|
||||
setAppButtons(tempApps)
|
||||
GetApps()
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (newSelectedApp.objectID === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID.length === 0) {
|
||||
@@ -237,48 +215,94 @@ const AppSelection = props => {
|
||||
console.log("Selected app changed (effect)");
|
||||
}, [newSelectedApp]);
|
||||
|
||||
const sizing = moreButton ? 510 : 480;
|
||||
useEffect(() => {
|
||||
var tempApps = []
|
||||
if (tempApps.length === 0) {
|
||||
// Object.entries(appFramework).forEach(([key, value]) => {
|
||||
// value.type = key;
|
||||
// tempApps.push(value);
|
||||
// });
|
||||
|
||||
// // Define the custom sorting order
|
||||
// const customSortingOrder = ["CASES", "SIEM", "ENDPOINT", "INTEL", "EMAIL"];
|
||||
|
||||
const lastApps = {}
|
||||
let endTypes = ["network", "assets", "iam"]
|
||||
|
||||
if (appFramework === undefined || appFramework === null || Object.keys(appFramework).length === 0) {
|
||||
window.location.href = "/welcome"
|
||||
return
|
||||
}
|
||||
|
||||
Object.entries(appFramework).forEach(([key, value]) => {
|
||||
if (key.toLowerCase() === "other" || key.toLowerCase() === "communication") {
|
||||
return
|
||||
}
|
||||
|
||||
value.type = key;
|
||||
|
||||
if (endTypes.includes(value.type.toLowerCase())) {
|
||||
lastApps[value.type] = value
|
||||
return
|
||||
}
|
||||
|
||||
if (lastPosted.type === value.type) {
|
||||
value = lastPosted
|
||||
}
|
||||
|
||||
tempApps.push(value);
|
||||
});
|
||||
|
||||
tempApps.sort((a, b) => {
|
||||
if (a.type.length > b.type.length) {
|
||||
return -1;
|
||||
} else if (a.type.length < b.type.length) {
|
||||
return 1;
|
||||
}
|
||||
});
|
||||
|
||||
let lastType = lastPosted.type === undefined ? "" : lastPosted.type.toLowerCase()
|
||||
|
||||
if (endTypes.includes(lastType)) {
|
||||
lastApps[lastPosted.type] = lastPosted
|
||||
}
|
||||
|
||||
if (moreButton) {
|
||||
tempApps.push(lastApps["network"])
|
||||
tempApps.push(lastApps["assets"])
|
||||
tempApps.push(lastApps["iam"])
|
||||
}
|
||||
|
||||
setAppButtons(tempApps)
|
||||
console.log("Updated appButtons: ", appButtons)
|
||||
GetApps()
|
||||
}
|
||||
}, [lastPosted, moreButton])
|
||||
|
||||
// const sizing = moreButton ? 510 : 480;
|
||||
const buttonWidth = 450;
|
||||
const buttonMargin = 10;
|
||||
const bottomButtonStyle = {
|
||||
borderRadius: 200,
|
||||
marginTop: moreButton ? 44 : "",
|
||||
height: 51,
|
||||
width: 510,
|
||||
width: 500,
|
||||
fontSize: 16,
|
||||
// background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)",
|
||||
background: "linear-gradient(90deg, #F86744 0%, #F34475 100%)",
|
||||
padding: "16px 24px",
|
||||
// top: 20,
|
||||
// margin: "auto",
|
||||
textTransform: 'capitalize',
|
||||
itemAlign: "center",
|
||||
// marginTop: 25
|
||||
// marginLeft: "65px",
|
||||
};
|
||||
const buttonStyle = {
|
||||
flex: 1,
|
||||
width: 224,
|
||||
padding: 25,
|
||||
margin: buttonMargin,
|
||||
color: "var(--White-text, #F1F1F1)",
|
||||
fontWeight: 400,
|
||||
fontSize: 17,
|
||||
background: "rgba(33, 33, 33, 1)",
|
||||
textTransform: 'capitalize',
|
||||
border: "1px solid rgba(33, 33, 33, 1)",
|
||||
borderRadius: 8,
|
||||
marginRight: 8,
|
||||
};
|
||||
// console.log("appFramework",appFramework.cases.name)
|
||||
|
||||
return (
|
||||
<Collapse in={true}>
|
||||
<div
|
||||
style={{
|
||||
minHeight: sizing,
|
||||
maxHeight: sizing,
|
||||
// minHeight: sizing,
|
||||
// maxHeight: sizing,
|
||||
marginTop: 10,
|
||||
width: 500,
|
||||
marginBottom: 25
|
||||
}}
|
||||
>
|
||||
{selectionOpen ? (
|
||||
@@ -311,7 +335,7 @@ const AppSelection = props => {
|
||||
style={{
|
||||
flex: 1,
|
||||
// width: 224,
|
||||
marginLeft: discoveryData === ('ERADICATION') ? 120 : 177,
|
||||
marginLeft: discoveryData === ("communication") ? 112 : 200,
|
||||
width: "100%",
|
||||
marginBottom: 23,
|
||||
fontSize: 16,
|
||||
@@ -394,6 +418,7 @@ const AppSelection = props => {
|
||||
>
|
||||
Select the apps you work with and we will connect the for you.
|
||||
</Typography>
|
||||
<Grid rowSpacing={1} columnSpacing={2} container >
|
||||
{appButtons.map((appData, index) => {
|
||||
|
||||
const appName = appData.name
|
||||
@@ -401,11 +426,12 @@ const AppSelection = props => {
|
||||
const appType = appData.type
|
||||
|
||||
return (
|
||||
|
||||
<AppSearchButtons
|
||||
appFramework={appFramework}
|
||||
index={index}
|
||||
totalApps={appButtons.length}
|
||||
appName={appName}
|
||||
appType = {appType}
|
||||
appType={appType}
|
||||
AppImage={AppImage}
|
||||
defaultSearch={defaultSearch}
|
||||
finishedApps={finishedApps}
|
||||
@@ -414,10 +440,20 @@ const AppSelection = props => {
|
||||
setDiscoveryData={setDiscoveryData}
|
||||
setDefaultSearch={setDefaultSearch}
|
||||
apps={apps}
|
||||
setMoreButton={setMoreButton}
|
||||
moreButton={moreButton}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
</div>
|
||||
{!moreButton ? (
|
||||
<div style={{width: "100%", marginLeft: 200, marginBottom: 20}}>
|
||||
<Link style={{color:"#FF8444"}} onClick={()=>{
|
||||
setMoreButton(true)
|
||||
}}
|
||||
>See More Apps</Link>
|
||||
</div>): ""}
|
||||
<div style={{ flexDirection: "row", }}>
|
||||
<Button variant="contained" type="submit" fullWidth style={bottomButtonStyle} onClick={() => {
|
||||
navigate("/welcome?tab=3")
|
||||
|
||||
Reference in New Issue
Block a user