Added all new common files related to onboarding and workflow suggestions
This commit is contained in:
frikky
@@ -0,0 +1,834 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import ReactGA from 'react-ga';
|
||||
import Button from "@material-ui/core/Button";
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
|
||||
import AliceCarousel from 'react-alice-carousel';
|
||||
import 'react-alice-carousel/lib/alice-carousel.css';
|
||||
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import EmailIcon from '@mui/icons-material/Email';
|
||||
import NewReleasesIcon from '@mui/icons-material/NewReleases';
|
||||
import ExtensionIcon from '@mui/icons-material/Extension';
|
||||
import LightbulbIcon from '@mui/icons-material/Lightbulb';
|
||||
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
|
||||
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
||||
|
||||
import theme from '../theme';
|
||||
import {
|
||||
Fade,
|
||||
IconButton,
|
||||
FormGroup,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
FormLabel,
|
||||
FormControlLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
Grid,
|
||||
Paper,
|
||||
Typography,
|
||||
TextField,
|
||||
Zoom,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
Divider,
|
||||
Tooltip,
|
||||
Chip,
|
||||
} from "@material-ui/core";
|
||||
import { useAlert } from "react-alert";
|
||||
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import WorkflowSearch from '../components/Workflowsearch.jsx';
|
||||
import AuthenticationItem from '../components/AuthenticationItem.jsx';
|
||||
import WorkflowPaper from "../components/WorkflowPaper.jsx"
|
||||
import UsecaseSearch from "../components/UsecaseSearch.jsx"
|
||||
|
||||
|
||||
const responsive = {
|
||||
0: { items: 1 },
|
||||
};
|
||||
|
||||
const WelcomeForm = (props) => {
|
||||
const { userdata, globalUrl, discoveryWrapper, setDiscoveryWrapper, appFramework, getFramework, activeStep, setActiveStep, steps, skipped, setSkipped, getApps, apps, handleSetSearch, usecaseButtons, defaultSearch, setDefaultSearch, selectionOpen, setSelectionOpen, } = props
|
||||
|
||||
const usecaseItems = [
|
||||
<div style={{minWidth: "95%", maxWidth: "95%", marginLeft: 5, marginRight: 5, }}>
|
||||
<UsecaseSearch
|
||||
globalUrl={globalUrl}
|
||||
defaultSearch={"Phishing"}
|
||||
appFramework={appFramework}
|
||||
apps={apps}
|
||||
getFramework={getFramework}
|
||||
userdata={userdata}
|
||||
/>
|
||||
</div>
|
||||
,
|
||||
<div style={{minWidth: "95%", maxWidth: "95%", marginLeft: 5, marginRight: 5, }}>
|
||||
<UsecaseSearch
|
||||
globalUrl={globalUrl}
|
||||
defaultSearch={"Enrichment"}
|
||||
appFramework={appFramework}
|
||||
apps={apps}
|
||||
getFramework={getFramework}
|
||||
userdata={userdata}
|
||||
/>
|
||||
</div>
|
||||
,
|
||||
<div style={{minWidth: "95%", maxWidth: "95%", marginLeft: 5, marginRight: 5, }}>
|
||||
<UsecaseSearch
|
||||
globalUrl={globalUrl}
|
||||
defaultSearch={"Enrichment"}
|
||||
usecaseSearch={"SIEM alert enrichment"}
|
||||
appFramework={appFramework}
|
||||
apps={apps}
|
||||
getFramework={getFramework}
|
||||
userdata={userdata}
|
||||
/>
|
||||
</div>
|
||||
,
|
||||
<div style={{minWidth: "95%", maxWidth: "95%", marginLeft: 5, marginRight: 5, }}>
|
||||
<UsecaseSearch
|
||||
globalUrl={globalUrl}
|
||||
defaultSearch={"Build your own"}
|
||||
appFramework={appFramework}
|
||||
apps={apps}
|
||||
getFramework={getFramework}
|
||||
userdata={userdata}
|
||||
/>
|
||||
</div>
|
||||
]
|
||||
|
||||
const [discoveryData, setDiscoveryData] = React.useState({})
|
||||
const [name, setName] = React.useState("")
|
||||
const [orgName, setOrgName] = React.useState("")
|
||||
const [role, setRole] = React.useState("")
|
||||
const [orgType, setOrgType] = React.useState("")
|
||||
const [finishedApps, setFinishedApps] = React.useState([])
|
||||
const [authentication, setAuthentication] = React.useState([]);
|
||||
const [newSelectedApp, setNewSelectedApp] = React.useState({})
|
||||
const [thumbIndex, setThumbIndex] = useState(0);
|
||||
const [thumbAnimation, setThumbAnimation] = useState(false);
|
||||
const [clickdiff, setclickdiff] = useState(0);
|
||||
|
||||
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
|
||||
|
||||
const alert = useAlert();
|
||||
let navigate = useNavigate();
|
||||
|
||||
const onNodeSelect = (label) => {
|
||||
if (setDiscoveryWrapper !== undefined) {
|
||||
setDiscoveryWrapper(
|
||||
{"id": label}
|
||||
)
|
||||
}
|
||||
|
||||
setSelectionOpen(true)
|
||||
setDefaultSearch(label)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (userdata.id === undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
if (userdata.name !== undefined && userdata.name !== null && userdata.name.length > 0) {
|
||||
setName(userdata.name)
|
||||
}
|
||||
|
||||
if (userdata.active_org !== undefined && userdata.active_org.name !== undefined && userdata.active_org.name !== null && userdata.active_org.name.length > 0) {
|
||||
setOrgName(userdata.active_org.name)
|
||||
}
|
||||
}, [userdata])
|
||||
|
||||
useEffect(() => {
|
||||
if (discoveryWrapper === undefined || discoveryWrapper.id === undefined) {
|
||||
setDefaultSearch("")
|
||||
var newfinishedApps = finishedApps
|
||||
newfinishedApps.push(defaultSearch)
|
||||
setFinishedApps(finishedApps)
|
||||
}
|
||||
}, [discoveryWrapper])
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
window.location.search !== undefined &&
|
||||
window.location.search !== null
|
||||
) {
|
||||
const urlSearchParams = new URLSearchParams(window.location.search);
|
||||
const params = Object.fromEntries(urlSearchParams.entries());
|
||||
const foundTab = params["tab"];
|
||||
if (foundTab !== null && foundTab !== undefined && !isNaN(foundTab)) {
|
||||
if (foundTab === 3 || foundTab === "3") {
|
||||
console.log("SET SEARCH!!")
|
||||
//setclickdiff(240)
|
||||
}
|
||||
} else {
|
||||
//navigate(`/welcome?tab=1`)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const isStepOptional = step => {
|
||||
return step === 1
|
||||
}
|
||||
|
||||
const sendUserUpdate = (name, role, userId) => {
|
||||
const data = {
|
||||
"tutorial": "welcome",
|
||||
"firstname": name,
|
||||
"company_role": role,
|
||||
"user_id": userId,
|
||||
}
|
||||
|
||||
const url = `${globalUrl}/api/v1/users/updateuser`
|
||||
fetch(url, {
|
||||
mode: "cors",
|
||||
method: "PUT",
|
||||
body: JSON.stringify(data),
|
||||
credentials: "include",
|
||||
crossDomain: true,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
},
|
||||
})
|
||||
.then((response) =>
|
||||
response.json().then((responseJson) => {
|
||||
if (responseJson["success"] === false) {
|
||||
console.log("Update user success")
|
||||
//alert.error("Failed updating org: ", responseJson.reason);
|
||||
} else {
|
||||
console.log("Update success!")
|
||||
//alert.success("Successfully edited org!");
|
||||
}
|
||||
})
|
||||
)
|
||||
.catch((error) => {
|
||||
console.log("Update err: ", error.toString())
|
||||
//alert.error("Err: " + error.toString());
|
||||
});
|
||||
}
|
||||
|
||||
const sendOrgUpdate = (orgname, company_type, orgId, priority) => {
|
||||
var data = {
|
||||
org_id: orgId,
|
||||
};
|
||||
|
||||
if (orgname.length > 0) {
|
||||
data.name = orgname
|
||||
}
|
||||
|
||||
if (company_type.length > 0) {
|
||||
data.company_type = company_type
|
||||
}
|
||||
|
||||
if (priority.length > 0) {
|
||||
data.priority = priority
|
||||
}
|
||||
|
||||
const url = globalUrl + `/api/v1/orgs/${orgId}`;
|
||||
fetch(url, {
|
||||
mode: "cors",
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
credentials: "include",
|
||||
crossDomain: true,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
},
|
||||
})
|
||||
.then((response) =>
|
||||
response.json().then((responseJson) => {
|
||||
if (responseJson["success"] === false) {
|
||||
console.log("Update of org failed")
|
||||
//alert.error("Failed updating org: ", responseJson.reason);
|
||||
} else {
|
||||
//alert.success("Successfully edited org!");
|
||||
}
|
||||
})
|
||||
)
|
||||
.catch((error) => {
|
||||
console.log("Update err: ", error.toString())
|
||||
//alert.error("Err: " + error.toString());
|
||||
});
|
||||
}
|
||||
|
||||
var workflowDelay = -50
|
||||
const NewHits = ({ hits }) => {
|
||||
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
|
||||
var counted = 0
|
||||
|
||||
const paperAppContainer = {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
alignContent: "space-between",
|
||||
marginTop: 5,
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid container spacing={4} style={paperAppContainer}>
|
||||
{hits.map((data, index) => {
|
||||
workflowDelay += 50
|
||||
|
||||
if (index > 3) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
|
||||
<Grid item xs={6} style={{ padding: "12px 10px 12px 10px" }}>
|
||||
<WorkflowPaper key={index} data={data} />
|
||||
</Grid>
|
||||
</Zoom>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
const isStepSkipped = step => {
|
||||
return skipped.has(step)
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
setDefaultSearch("")
|
||||
|
||||
if (activeStep === 0) {
|
||||
console.log("Should send basic information about org (fetch)")
|
||||
setclickdiff(0)
|
||||
navigate(`/welcome?tab=2`)
|
||||
|
||||
if (isCloud) {
|
||||
ReactGA.event({
|
||||
category: "welcome",
|
||||
action: "click_page_one_next",
|
||||
label: "",
|
||||
})
|
||||
}
|
||||
|
||||
if (userdata.active_org !== undefined && userdata.active_org.id !== undefined && userdata.active_org.id !== null && userdata.active_org.id.length > 0) {
|
||||
sendOrgUpdate(orgName, orgType, userdata.active_org.id, "")
|
||||
}
|
||||
|
||||
if (userdata.id !== undefined && userdata.id !== null && userdata.id.length > 0) {
|
||||
sendUserUpdate(name, role, userdata.id)
|
||||
}
|
||||
|
||||
} else if (activeStep === 1) {
|
||||
console.log("Should send secondary info about apps and other things")
|
||||
setDiscoveryWrapper({})
|
||||
|
||||
setclickdiff(240)
|
||||
//setclickdiff(0)
|
||||
navigate(`/welcome?tab=3`)
|
||||
//handleSetSearch("Enrichment", "2. Enrich")
|
||||
handleSetSearch(usecaseButtons[0].name, usecaseButtons[0].usecase)
|
||||
getApps()
|
||||
|
||||
// Make sure it's up to date
|
||||
if (getFramework !== undefined) {
|
||||
getFramework()
|
||||
}
|
||||
} else if (activeStep === 2) {
|
||||
console.log("Should send third page with workflows activated and the like")
|
||||
}
|
||||
|
||||
|
||||
let newSkipped = skipped;
|
||||
if (isStepSkipped(activeStep)) {
|
||||
newSkipped = new Set(newSkipped.values());
|
||||
newSkipped.delete(activeStep);
|
||||
}
|
||||
|
||||
setActiveStep(prevActiveStep => prevActiveStep + 1);
|
||||
setSkipped(newSkipped);
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
setActiveStep(prevActiveStep => prevActiveStep - 1);
|
||||
|
||||
if (activeStep === 2) {
|
||||
setDiscoveryWrapper({})
|
||||
|
||||
if (getFramework !== undefined) {
|
||||
getFramework()
|
||||
}
|
||||
setclickdiff(0)
|
||||
navigate("/welcome?tab=2")
|
||||
} else if (activeStep === 1) {
|
||||
//setclickdiff(0)
|
||||
navigate("/welcome?tab=1")
|
||||
}
|
||||
};
|
||||
|
||||
const handleSkip = () => {
|
||||
setclickdiff(240)
|
||||
if (!isStepOptional(activeStep)) {
|
||||
throw new Error("You can't skip a step that isn't optional.");
|
||||
}
|
||||
setActiveStep(prevActiveStep => prevActiveStep + 1);
|
||||
setSkipped(prevSkipped => {
|
||||
const newSkipped = new Set(prevSkipped.values());
|
||||
newSkipped.add(activeStep);
|
||||
return newSkipped;
|
||||
});
|
||||
};
|
||||
const handleReset = () => {
|
||||
setActiveStep(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Selected app changed (effect)")
|
||||
}, [newSelectedApp])
|
||||
|
||||
|
||||
//const buttonWidth = 145
|
||||
const buttonWidth = 450
|
||||
const buttonMargin = 10
|
||||
const sizing = 475
|
||||
const buttonStyle = {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
padding: 25,
|
||||
margin: buttonMargin,
|
||||
fontSize: 18,
|
||||
}
|
||||
|
||||
const slideNext = () => {
|
||||
if (!thumbAnimation && thumbIndex < usecaseItems.length - 1) {
|
||||
//handleSetSearch(usecaseButtons[0].name, usecaseButtons[0].usecase)
|
||||
setThumbIndex(thumbIndex + 1);
|
||||
} else if (!thumbAnimation && thumbIndex === usecaseItems.length - 1) {
|
||||
setThumbIndex(0)
|
||||
}
|
||||
};
|
||||
|
||||
const slidePrev = () => {
|
||||
if (!thumbAnimation && thumbIndex > 0) {
|
||||
setThumbIndex(thumbIndex - 1);
|
||||
} else if (!thumbAnimation && thumbIndex === 0) {
|
||||
setThumbIndex(usecaseItems.length-1)
|
||||
}
|
||||
};
|
||||
|
||||
const newButtonStyle = {
|
||||
padding: 22,
|
||||
flex: 1,
|
||||
margin: buttonMargin,
|
||||
minWidth: buttonWidth,
|
||||
maxWidth: buttonWidth,
|
||||
}
|
||||
|
||||
const getStepContent = (step) => {
|
||||
switch (step) {
|
||||
case 0:
|
||||
return (
|
||||
<Fade in={true}>
|
||||
<Grid container spacing={1} style={{margin: "auto", maxWidth: 500, minWidth: 500, minHeight: sizing, maxHeight: sizing, }}>
|
||||
{/*isCloud ? null :
|
||||
<Typography variant="body1" style={{marginLeft: 8, marginTop: 10, marginRight: 30, }} color="textSecondary">
|
||||
This data will be used within the product and NOT be shared unless <a href="https://shuffler.io/docs/organizations#cloud_synchronization" target="_blank" rel="norefferer" style={{color: "#f86a3e", textDecoration: "none"}}>cloud synchronization</a> is configured.
|
||||
</Typography>
|
||||
*/}
|
||||
<Typography variant="body1" style={{marginLeft: 8, marginTop: 10, marginRight: 30, }} color="textSecondary">
|
||||
First, we need some more information in order to understand how we best can help you find relevant Usecases. This is optional, but highly encouraged.
|
||||
</Typography>
|
||||
<Grid item xs={11} style={{marginTop: 16, padding: 0,}}>
|
||||
<TextField
|
||||
required
|
||||
style={{width: "100%", marginTop: 0,}}
|
||||
placeholder="Name"
|
||||
autoFocus
|
||||
label="Name"
|
||||
type="name"
|
||||
id="standard-required"
|
||||
autoComplete="name"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
setName(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={11} style={{marginTop: 10, padding: 0,}}>
|
||||
<TextField
|
||||
required
|
||||
style={{width: "100%", marginTop: 0,}}
|
||||
placeholder="Company / Institution"
|
||||
label="Company Name"
|
||||
type="companyname"
|
||||
id="standard-required"
|
||||
autoComplete="CompanyName"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
value={orgName}
|
||||
onChange={(e) => {
|
||||
setOrgName(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={11} style={{marginTop: 10}}>
|
||||
<FormControl fullWidth={true}>
|
||||
<InputLabel style={{marginLeft: 10, color: "#B9B9BA" }}>Your Role</InputLabel>
|
||||
<Select
|
||||
variant="outlined"
|
||||
required
|
||||
onChange={(e) => {
|
||||
setRole(e.target.value)
|
||||
}}
|
||||
>
|
||||
<MenuItem value={"Student"}>Student</MenuItem>
|
||||
<MenuItem value={"Security Analyst/Engineer"}>Security Analyst/Engineer</MenuItem>
|
||||
<MenuItem value={"SOC Manager"}>SOC Manager</MenuItem>
|
||||
<MenuItem value={"C-Level"}>C-Level</MenuItem>
|
||||
<MenuItem value={"Other"}>Other</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={11} style={{marginTop: 16}}>
|
||||
<FormControl fullWidth={true}>
|
||||
<InputLabel style={{ marginLeft: 10, color: "#B9B9BA" }}>Company Type</InputLabel>
|
||||
<Select
|
||||
required
|
||||
variant="outlined"
|
||||
onChange={(e) => {
|
||||
setOrgType(e.target.value)
|
||||
}}
|
||||
>
|
||||
<MenuItem value={"Education"}>Education</MenuItem>
|
||||
<MenuItem value={"MSSP"}>MSSP</MenuItem>
|
||||
<MenuItem value={"Security Product Company"}>Security Product Company</MenuItem>
|
||||
<MenuItem value={"Other"}>Other</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Fade>
|
||||
)
|
||||
case 1:
|
||||
return (
|
||||
<Fade in={true}>
|
||||
<div style={{minHeight: sizing, maxHeight: sizing, marginTop: 20, maxWidth: 500, }}>
|
||||
<Typography variant="body1" style={{marginLeft: 8, marginTop: 25, marginRight: 30, marginBottom: 0, }} color="textSecondary">
|
||||
Clicks the buttons below to find your apps, then we will help you find relevant workflows. Can't find your app? <span style={{color: "#f86a3e", cursor: "pointer"}} onClick={() => {
|
||||
if (window.drift !== undefined) {
|
||||
window.drift.api.startInteraction({ interactionId: 340043 })
|
||||
} else {
|
||||
console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
|
||||
}
|
||||
}}>Contact our App Developers!</span>
|
||||
</Typography>
|
||||
{/*The app framework helps us access and authenticate the most important APIs for you. */}
|
||||
|
||||
{/*
|
||||
<Grid item xs={10}>
|
||||
<FormControl fullWidth={true}>
|
||||
<InputLabel style={{ color: "#B9B9BA" }}>What is your development experience?</InputLabel>
|
||||
<Select
|
||||
required
|
||||
>
|
||||
<MenuItem value={10}>Beginner</MenuItem>
|
||||
<MenuItem value={20}>Intermediate</MenuItem>
|
||||
<MenuItem value={30}>Automation Ninja</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
*/}
|
||||
<Grid item xs={11} style={{marginTop: 25, }}>
|
||||
{/*<FormLabel style={{ color: "#B9B9BA" }}>Find your integrations!</FormLabel>*/}
|
||||
<div style={{display: "flex"}}>
|
||||
<Button disabled={finishedApps.includes("CASES")} variant={defaultSearch === "CASES" ? "contained" : "outlined"} style={buttonStyle} startIcon={<LightbulbIcon />} onClick={(event) => { onNodeSelect("CASES") }} >
|
||||
Case Management
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{display: "flex"}}>
|
||||
<Button disabled={finishedApps.includes("SIEM")} variant={defaultSearch === "SIEM" ? "contained" : "outlined"} style={buttonStyle} startIcon={<SearchIcon />} onClick={(event) => { onNodeSelect("SIEM") }} >
|
||||
SIEM
|
||||
</Button>
|
||||
<Button disabled={finishedApps.includes("EDR & AV") || finishedApps.includes("ERADICATION")} variant={defaultSearch === "Eradication" ? "contained" : "outlined"} style={buttonStyle} startIcon={<NewReleasesIcon />} onClick={(event) => { onNodeSelect("ERADICATION") }} >
|
||||
Endpoint
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{display: "flex"}}>
|
||||
<Button disabled={finishedApps.includes("INTEL")} variant={defaultSearch === "INTEL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<ExtensionIcon />} onClick={(event) => { onNodeSelect("INTEL") }} >
|
||||
|
||||
|
||||
Intel
|
||||
</Button>
|
||||
<Button disabled={finishedApps.includes("COMMS") || finishedApps.includes("EMAIL")} variant={defaultSearch === "EMAIL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<EmailIcon />} onClick={(event) => { onNodeSelect("EMAIL") }} >
|
||||
Email
|
||||
</Button>
|
||||
</div>
|
||||
{/* <FormControl>
|
||||
<FormLabel style={{ color: "#B9B9BA" }}>What do you want to automate first ?</FormLabel>
|
||||
<FormGroup>
|
||||
<FormControlLabel
|
||||
value="Email"
|
||||
control={<Checkbox style={{ color: "#F85A3E" }} onChange={(event) => { onNodeSelect("Email") }} />}
|
||||
label="Email"
|
||||
labelPlacement="Email"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="SIEM"
|
||||
control={<Checkbox style={{ color: "#F85A3E" }} onChange={(event) => { onNodeSelect("SIEM") }} />}
|
||||
label="SIEM"
|
||||
labelPlacement="SIEM"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="EDR"
|
||||
control={<Checkbox style={{ color: "#F85A3E" }} onChange={(event) => { onNodeSelect("EDR") }} />}
|
||||
label="EDR"
|
||||
labelPlacement="EDR"
|
||||
/>
|
||||
</FormGroup>
|
||||
</FormControl> */}
|
||||
</Grid>
|
||||
{/*
|
||||
<Grid item xs={10} paddingBottom="20px">
|
||||
<FormControl fullWidth={true}>
|
||||
<InputLabel style={{ color: "#B9B9BA" }}>What tools do you use?</InputLabel>
|
||||
<Select
|
||||
required
|
||||
>
|
||||
<MenuItem value={10}>Email</MenuItem>
|
||||
<MenuItem value={20}>SIEM</MenuItem>
|
||||
<MenuItem value={30}>EDR</MenuItem>
|
||||
<MenuItem value={30}>Chat System</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
*/}
|
||||
</div>
|
||||
</Fade>
|
||||
)
|
||||
case 2:
|
||||
return (
|
||||
<Fade in={true}>
|
||||
<div style={{marginTop: 0, maxWidth: 700, minWidth: 700, margin: "auto", minHeight: sizing, maxHeight: sizing, }}>
|
||||
<Typography variant="body1" style={{marginTop: 15, marginBottom: 0, maxWidth: 500, margin: "auto", marginBottom: 15, }} color="textSecondary">
|
||||
These are some of our Workflow templates, used to start new Workflows. Use the right and left buttons to find <a href="/usecases" target="_blank" rel="norefferer" style={{color: "#f86a3e", textDecoration: "none", }}>new Usecases</a>, and click the orange button to build it.
|
||||
</Typography>
|
||||
{/*<Divider />*/}
|
||||
{/*
|
||||
<div style={{width: 475, margin: "auto",}}>
|
||||
{usecaseButtons.map((usecase, index) => {
|
||||
|
||||
return (
|
||||
<Chip
|
||||
key={usecase.name}
|
||||
style={{
|
||||
backgroundColor: defaultSearch === usecase.name ? usecase.color : theme.palette.surfaceColor,
|
||||
marginRight: 10,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
height: 28,
|
||||
cursor: "pointer",
|
||||
border: `1px solid ${usecase.color}`,
|
||||
color: "white",
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
}}
|
||||
label={`${index+1}. ${usecase.name}`}
|
||||
onClick={() => {
|
||||
console.log("Clicked: ", usecase.name)
|
||||
if (defaultSearch === usecase.name) {
|
||||
//setSelectedUsecaseCategory("")
|
||||
} else {
|
||||
handleSetSearch(usecase.name, usecase.usecase)
|
||||
}
|
||||
//addFilter(usecase.name.slice(3,usecase.name.length))
|
||||
}}
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
*/}
|
||||
<div style={{marginTop: 0, }}>
|
||||
{/*
|
||||
<UsecaseSearch
|
||||
globalUrl={globalUrl}
|
||||
defaultSearch={defaultSearch}
|
||||
appFramework={appFramework}
|
||||
apps={apps}
|
||||
/>
|
||||
*/}
|
||||
|
||||
<div className="thumbs" style={{display: "flex"}}>
|
||||
<Tooltip title={"Previous usecase"}>
|
||||
<IconButton
|
||||
style={{
|
||||
backgroundColor: thumbIndex === 0 ? "inherit" : "white",
|
||||
zIndex: 5000,
|
||||
minHeight: 50,
|
||||
maxHeight: 50,
|
||||
color: "grey",
|
||||
marginTop: 150,
|
||||
borderRadius: 50,
|
||||
border: "1px solid rgba(255,255,255,0.3)",
|
||||
}}
|
||||
onClick={() => {
|
||||
slidePrev()
|
||||
}}
|
||||
>
|
||||
<ArrowBackIosNewIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<div style={{minWidth: 554, maxWidth: 554, borderRadius: theme.palette.borderRadius, padding: 25, }}>
|
||||
<AliceCarousel
|
||||
style={{ backgroundColor: theme.palette.surfaceColor, minHeight: 750, maxHeight: 750, }}
|
||||
items={usecaseItems}
|
||||
activeIndex={thumbIndex}
|
||||
infiniteLoop
|
||||
mouseTracking
|
||||
responsive={responsive}
|
||||
// activeIndex={activeIndex}
|
||||
controlsStrategy="responsive"
|
||||
autoPlay={false}
|
||||
infinite={true}
|
||||
animationType="fadeout"
|
||||
animationDuration={800}
|
||||
disableButtonsControls
|
||||
disableDotsControls
|
||||
|
||||
/>
|
||||
</div>
|
||||
<Tooltip title={"Next usecase"}>
|
||||
<IconButton
|
||||
style={{
|
||||
backgroundColor: thumbIndex === usecaseButtons.length-1 ? "inherit" : "white",
|
||||
zIndex: 5000,
|
||||
minHeight: 50,
|
||||
maxHeight: 50,
|
||||
color: "grey",
|
||||
marginTop: 150,
|
||||
borderRadius: 50,
|
||||
border: "1px solid rgba(255,255,255,0.3)",
|
||||
}}
|
||||
onClick={() => {
|
||||
slideNext()
|
||||
}}
|
||||
>
|
||||
<ArrowForwardIosIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fade>
|
||||
)
|
||||
default:
|
||||
return "unknown step"
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{}}>
|
||||
{/*selectionOpen ?
|
||||
<WorkflowSearch
|
||||
defaultSearch={defaultSearch}
|
||||
newSelectedApp={newSelectedApp}
|
||||
setNewSelectedApp={setNewSelectedApp}
|
||||
/>
|
||||
: null*/}
|
||||
<div>
|
||||
{activeStep === steps.length ? (
|
||||
<div paddingTop="20px">
|
||||
You Will be Redirected to getting Start Page Wait for 5-sec.
|
||||
<Button onClick={handleReset}>Reset</Button>
|
||||
<script>
|
||||
setTimeout(function() {
|
||||
navigate("/workflows")
|
||||
}, 5000);
|
||||
</script>
|
||||
<Button>
|
||||
<Link style={{color: "#f86a3e", }} to="/workflows" className="btn btn-primary">
|
||||
Getting Started
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{getStepContent(activeStep)}
|
||||
<div style={{marginBottom: 20, }}/>
|
||||
{activeStep === 2 || activeStep === 1 ?
|
||||
<div style={{margin: "auto", minWidth: 500, maxWidth: 500, position: "relative", }}>
|
||||
<Button
|
||||
disabled={activeStep === 0}
|
||||
onClick={handleBack}
|
||||
variant={"outlined"}
|
||||
style={{marginLeft: 10, height: 64, width: 100, position: "absolute", top: activeStep === 1 ? -594 : -577, left: activeStep === 1 ? 105+clickdiff : -145+clickdiff, }}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
variant={"outlined"}
|
||||
color="primary"
|
||||
onClick={handleNext}
|
||||
style={{marginLeft: 10, height: 64, width: 100, position: "absolute", top: activeStep === 1 ? -594 : -577, left: activeStep === 1 ? 758+clickdiff : 510+clickdiff, }}
|
||||
disabled={activeStep === 0 ? orgName.length === 0 || name.length === 0 : false}
|
||||
>
|
||||
{activeStep === steps.length - 1 ? "Finish" : "Next"}
|
||||
</Button>
|
||||
</div>
|
||||
:
|
||||
<div style={{margin: "auto", minWidth: 500, maxWidth: 500, marginLeft: activeStep === 1 ? 250 : "auto", marginTop: activeStep === 0 ? 25 : 0, }}>
|
||||
<Button disabled={activeStep === 0} onClick={handleBack}>
|
||||
Back
|
||||
</Button>
|
||||
{/*isStepOptional(activeStep) && (
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleSkip}
|
||||
>
|
||||
Skip
|
||||
</Button>
|
||||
)*/}
|
||||
<Button
|
||||
variant={activeStep === 1 ? finishedApps.length >= 4 ? "contained" : "outlined" : "outlined"}
|
||||
color="primary"
|
||||
onClick={handleNext}
|
||||
style={{marginLeft: 10, }}
|
||||
disabled={activeStep === 0 ? orgName.length === 0 || name.length === 0 : false}
|
||||
>
|
||||
{activeStep === steps.length - 1 ? "Finish" : "Next"}
|
||||
</Button>
|
||||
{activeStep === 0 ?
|
||||
<Button
|
||||
variant={"outlined"}
|
||||
color="secondary"
|
||||
onClick={() => {
|
||||
console.log("Skip!")
|
||||
|
||||
if (isCloud) {
|
||||
ReactGA.event({
|
||||
category: "welcome",
|
||||
action: "click_page_one_skip",
|
||||
label: "",
|
||||
})
|
||||
}
|
||||
|
||||
setActiveStep(1)
|
||||
navigate(`/welcome?tab=2`)
|
||||
}}
|
||||
style={{marginLeft: 240, }}
|
||||
disabled={activeStep !== 0}
|
||||
>
|
||||
Skip
|
||||
</Button>
|
||||
: null}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WelcomeForm
|
||||
Reference in New Issue
Block a user