Another merge fix due
This commit is contained in:
frikky
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,378 @@
|
|||||||
|
import React, {useEffect, useState} from 'react';
|
||||||
|
|
||||||
|
import ReactGA from 'react-ga4';
|
||||||
|
import { useTheme } from '@material-ui/core/styles';
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
|
||||||
|
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
|
||||||
|
|
||||||
|
import algoliasearch from 'algoliasearch/lite';
|
||||||
|
import { InstantSearch, Configure, connectSearchBox, connectHits, connectHitInsights } from 'react-instantsearch-dom';
|
||||||
|
|
||||||
|
import aa from 'search-insights'
|
||||||
|
|
||||||
|
import {
|
||||||
|
Zoom,
|
||||||
|
Grid,
|
||||||
|
Paper,
|
||||||
|
TextField,
|
||||||
|
ButtonBase,
|
||||||
|
InputAdornment,
|
||||||
|
Typography,
|
||||||
|
Button,
|
||||||
|
Tooltip
|
||||||
|
} from '@material-ui/core';
|
||||||
|
|
||||||
|
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
|
||||||
|
//const searchClient = algoliasearch("L55H18ZINA", "a19be455e7e75ee8f20a93d26b9fc6d6")
|
||||||
|
const AppGrid = props => {
|
||||||
|
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, userdata } = props
|
||||||
|
|
||||||
|
const isCloud =
|
||||||
|
window.location.host === "localhost:3002" ||
|
||||||
|
window.location.host === "shuffler.io";
|
||||||
|
|
||||||
|
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
|
||||||
|
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 2 : parsedXs
|
||||||
|
const theme = useTheme();
|
||||||
|
//const [apps, setApps] = React.useState([]);
|
||||||
|
//const [filteredApps, setFilteredApps] = React.useState([]);
|
||||||
|
const [formMail, setFormMail] = React.useState("");
|
||||||
|
const [message, setMessage] = React.useState("");
|
||||||
|
const [formMessage, setFormMessage] = React.useState("");
|
||||||
|
|
||||||
|
const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
|
||||||
|
|
||||||
|
const innerColor = "rgba(255,255,255,0.65)"
|
||||||
|
const borderRadius = 3
|
||||||
|
window.title = "Shuffle | Apps | Find and integrate any app"
|
||||||
|
|
||||||
|
const submitContact = (email, message) => {
|
||||||
|
const data = {
|
||||||
|
"firstname": "",
|
||||||
|
"lastname": "",
|
||||||
|
"title": "",
|
||||||
|
"companyname": "",
|
||||||
|
"email": email,
|
||||||
|
"phone": "",
|
||||||
|
"message": message,
|
||||||
|
}
|
||||||
|
|
||||||
|
const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
|
||||||
|
|
||||||
|
fetch(globalUrl+"/api/v1/contact", {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(response => {
|
||||||
|
if (response.success === true) {
|
||||||
|
setFormMessage(response.reason)
|
||||||
|
//alert.info("Thanks for submitting!")
|
||||||
|
} else {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
}
|
||||||
|
|
||||||
|
setFormMail("")
|
||||||
|
setMessage("")
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
console.log(error)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
||||||
|
useEffect(() => {
|
||||||
|
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
|
||||||
|
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||||
|
const params = Object.fromEntries(urlSearchParams.entries())
|
||||||
|
const foundQuery = params["q"]
|
||||||
|
if (foundQuery !== null && foundQuery !== undefined) {
|
||||||
|
console.log("Got query: ", foundQuery)
|
||||||
|
refine(foundQuery)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form noValidate action="" role="search">
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1em",
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon style={{marginLeft: 5}}/>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
autoComplete='off'
|
||||||
|
type="search"
|
||||||
|
color="primary"
|
||||||
|
defaultValue={currentRefinement}
|
||||||
|
placeholder="Find Apps..."
|
||||||
|
id="shuffle_search_field"
|
||||||
|
onChange={(event) => {
|
||||||
|
refine(event.currentTarget.value)
|
||||||
|
}}
|
||||||
|
limit={5}
|
||||||
|
/>
|
||||||
|
{/*isSearchStalled ? 'My search is stalled' : ''*/}
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
var workflowDelay = -50
|
||||||
|
const Hits = ({ hits, insights }) => {
|
||||||
|
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
|
||||||
|
var counted = 0
|
||||||
|
|
||||||
|
//console.log(hits)
|
||||||
|
//var curhits = hits
|
||||||
|
//if (hits.length > 0 && defaultApps.length === 0) {
|
||||||
|
// setDefaultApps(hits)
|
||||||
|
//}
|
||||||
|
|
||||||
|
//const [defaultApps, setDefaultApps] = React.useState([])
|
||||||
|
//console.log(hits)
|
||||||
|
//if (hits.length > 0 && hits.length !== innerHits.length) {
|
||||||
|
// setInnerHits(hits)
|
||||||
|
//}
|
||||||
|
|
||||||
|
console.log("In appgrid")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
{hits.map((data, index) => {
|
||||||
|
|
||||||
|
workflowDelay += 50
|
||||||
|
|
||||||
|
const paperStyle = {
|
||||||
|
backgroundColor: index === mouseHoverIndex ? "rgba(255,255,255,0.8)" : theme.palette.inputColor,
|
||||||
|
color: index === mouseHoverIndex ? theme.palette.inputColor : "rgba(255,255,255,0.8)",
|
||||||
|
border: `1px solid ${innerColor}`,
|
||||||
|
padding: 15,
|
||||||
|
cursor: "pointer",
|
||||||
|
position: "relative",
|
||||||
|
minHeight: 116,
|
||||||
|
}
|
||||||
|
|
||||||
|
if (counted === 12/xs*rowHandler) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
counted += 1
|
||||||
|
var parsedname = ""
|
||||||
|
for (var key = 0; key < data.name.length; key++) {
|
||||||
|
var character = data.name.charAt(key)
|
||||||
|
if (character === character.toUpperCase()) {
|
||||||
|
//console.log(data.name[key], data.name[key+1])
|
||||||
|
if (data.name.charAt(key+1) !== undefined && data.name.charAt(key+1) === data.name.charAt(key+1).toUpperCase()) {
|
||||||
|
} else {
|
||||||
|
parsedname += " "
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
parsedname += character
|
||||||
|
}
|
||||||
|
|
||||||
|
parsedname = (parsedname.charAt(0).toUpperCase()+parsedname.substring(1)).replaceAll("_", " ")
|
||||||
|
const appUrl = isCloud ? `/apps/${data.objectID}?queryID=${data.__queryID}` : `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`
|
||||||
|
return (
|
||||||
|
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
|
||||||
|
<Grid item xs={xs} key={index}>
|
||||||
|
<a href={appUrl} rel="noopener noreferrer" target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>
|
||||||
|
<Paper elevation={0} style={paperStyle} onMouseOver={() => {
|
||||||
|
setMouseHoverIndex(index)
|
||||||
|
/*
|
||||||
|
ReactGA.event({
|
||||||
|
category: "app_grid_view",
|
||||||
|
action: `search_bar_click`,
|
||||||
|
label: "",
|
||||||
|
})
|
||||||
|
*/
|
||||||
|
}} onMouseOut={() => {
|
||||||
|
setMouseHoverIndex(-1)
|
||||||
|
}} onClick={() => {
|
||||||
|
if (isCloud) {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "app_grid_view",
|
||||||
|
action: `app_${parsedname}_${data.id}_click`,
|
||||||
|
label: "",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//const searchClient = algoliasearch("L55H18ZINA", "a19be455e7e75ee8f20a93d26b9fc6d6")
|
||||||
|
console.log(searchClient)
|
||||||
|
aa('init', {
|
||||||
|
appId: searchClient.appId,
|
||||||
|
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||||
|
})
|
||||||
|
|
||||||
|
const timestamp = new Date().getTime()
|
||||||
|
aa('sendEvents', [
|
||||||
|
{
|
||||||
|
eventType: 'click',
|
||||||
|
eventName: 'Product Clicked',
|
||||||
|
index: 'appsearch',
|
||||||
|
objectIDs: [data.objectID],
|
||||||
|
timestamp: timestamp,
|
||||||
|
queryID: data.__queryID,
|
||||||
|
positions: [data.__position],
|
||||||
|
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
}}>
|
||||||
|
<ButtonBase style={{padding: 5, borderRadius: 3, minHeight: 100, minWidth: 100,}}>
|
||||||
|
<img alt={data.name} src={data.image_url} style={{width: "100%", maxWidth: 100, minWidth: 100, minHeight: 100, maxHeight: 100, display: "block", margin: "0 auto"}} />
|
||||||
|
</ButtonBase>
|
||||||
|
<div/>
|
||||||
|
{index === mouseHoverIndex || showName === true ?
|
||||||
|
parsedname
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
{data.generated ?
|
||||||
|
<Tooltip title={"Created with App editor"} style={{marginTop: "28px", width: "100%"}} aria-label={data.name}>
|
||||||
|
{data.invalid ?
|
||||||
|
<CloudQueueIcon style={{position: "absolute", top: 1, left: 3, height: 16, width: 16, color: theme.palette.primary.main }}/>
|
||||||
|
:
|
||||||
|
<CloudQueueIcon style={{position: "absolute", top: 1, left: 3, height: 16, width: 16, color: "rgba(255,255,255,0.95)",}}/>
|
||||||
|
}
|
||||||
|
</Tooltip>
|
||||||
|
:
|
||||||
|
<Tooltip title={"Created with python (custom app)"} style={{marginTop: "28px", width: "100%"}} aria-label={data.name}>
|
||||||
|
<CodeIcon style={{position: "absolute", top: 1, left: 3, height: 16, width: 16, color: "rgba(255,255,255,0.95)",}}/>
|
||||||
|
</Tooltip>
|
||||||
|
}
|
||||||
|
</Paper>
|
||||||
|
</a>
|
||||||
|
</Grid>
|
||||||
|
</Zoom>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const CustomSearchBox = connectSearchBox(SearchBox)
|
||||||
|
const CustomHits = connectHits(Hits)
|
||||||
|
//const CustomHits = connectHitInsights(aa)(Hits)
|
||||||
|
const selectButtonStyle = {
|
||||||
|
minWidth: 150,
|
||||||
|
maxWidth: 150,
|
||||||
|
minHeight: 50,
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{width: "100%", textAlign: "center", position: "relative", height: "100%", display: "flex"}}>
|
||||||
|
{/*
|
||||||
|
<div style={{padding: 10, }}>
|
||||||
|
<Button
|
||||||
|
style={selectButtonStyle}
|
||||||
|
variant="outlined"
|
||||||
|
onClick={() => {
|
||||||
|
const searchField = document.createElement("shuffle_search_field")
|
||||||
|
console.log("Field: ", searchField)
|
||||||
|
if (searchField !== null & searchField !== undefined) {
|
||||||
|
console.log("Set field.")
|
||||||
|
searchField.value = "WHAT WABALABA"
|
||||||
|
searchField.setAttribute("value", "WHAT WABALABA")
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cases
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
*/}
|
||||||
|
<div style={{width: "100%", position: "relative", height: "100%",}}>
|
||||||
|
<InstantSearch searchClient={searchClient} indexName="appsearch">
|
||||||
|
<div style={{maxWidth: 450, margin: "auto", marginTop: 15, marginBottom: 15, }}>
|
||||||
|
<CustomSearchBox />
|
||||||
|
</div>
|
||||||
|
<CustomHits hitsPerPage={5}/>
|
||||||
|
<Configure clickAnalytics />
|
||||||
|
</InstantSearch>
|
||||||
|
{showSuggestion === true ?
|
||||||
|
<div style={{paddingTop: 0, maxWidth: isMobile ? "100%" : "60%", margin: "auto"}}>
|
||||||
|
<Typography variant="h6" style={{color: "white", marginTop: 50,}}>
|
||||||
|
Can't find what you're looking for?
|
||||||
|
</Typography>
|
||||||
|
<div style={{flex: "1", display: "flex", flexDirection: "row", textAlign: "center",}}>
|
||||||
|
<TextField
|
||||||
|
required
|
||||||
|
style={{flex: "1", marginRight: "15px", backgroundColor: theme.palette.inputColor}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
fullWidth={true}
|
||||||
|
placeholder="Email (optional)"
|
||||||
|
type="email"
|
||||||
|
id="email-handler"
|
||||||
|
autoComplete="email"
|
||||||
|
margin="normal"
|
||||||
|
variant="outlined"
|
||||||
|
onChange={e => setFormMail(e.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
required
|
||||||
|
style={{flex: "1", backgroundColor: theme.palette.inputColor}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
fullWidth={true}
|
||||||
|
placeholder="What apps do you want to see?"
|
||||||
|
type=""
|
||||||
|
id="standard-required"
|
||||||
|
margin="normal"
|
||||||
|
variant="outlined"
|
||||||
|
autoComplete="off"
|
||||||
|
onChange={e => setMessage(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
style={buttonStyle}
|
||||||
|
disabled={message.length === 0}
|
||||||
|
onClick={() => {
|
||||||
|
submitContact(formMail, message)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
<Typography style={{color: "white"}} variant="body2">{formMessage}</Typography>
|
||||||
|
</div>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
|
||||||
|
<span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: isMobile?"":120, }}>
|
||||||
|
<Typography variant="body2" color="textSecondary" style={{}}>
|
||||||
|
Search by
|
||||||
|
</Typography>
|
||||||
|
<a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
|
||||||
|
<img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{height: 17, marginLeft: 5, marginTop: 3,}} />
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AppGrid;
|
||||||
@@ -0,0 +1,291 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import ReactGA from 'react-ga4';
|
||||||
|
import { useTheme } from '@material-ui/core/styles';
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
import { useAlert } from "react-alert";
|
||||||
|
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
|
||||||
|
|
||||||
|
//import algoliasearch from 'algoliasearch/lite';
|
||||||
|
import algoliasearch from 'algoliasearch';
|
||||||
|
import { InstantSearch, connectSearchBox, connectHits } from 'react-instantsearch-dom';
|
||||||
|
import { Grid, Paper, TextField, ButtonBase, InputAdornment, Typography, Button, Tooltip} from '@material-ui/core';
|
||||||
|
import aa from 'search-insights'
|
||||||
|
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
|
||||||
|
const Appsearch = props => {
|
||||||
|
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, newSelectedApp, setNewSelectedApp, defaultSearch, showSearch, ConfiguredHits, userdata, cy, isCreatorPage, actionImageList, setActionImageList} = props
|
||||||
|
|
||||||
|
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
|
||||||
|
const alert = useAlert();
|
||||||
|
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
|
||||||
|
const xs = parsedXs === undefined || parsedXs === null ? 12 : parsedXs
|
||||||
|
const theme = useTheme();
|
||||||
|
//const [apps, setApps] = React.useState([]);
|
||||||
|
//const [filteredApps, setFilteredApps] = React.useState([]);
|
||||||
|
const [formMail, setFormMail] = React.useState("");
|
||||||
|
const [message, setMessage] = React.useState("");
|
||||||
|
const [formMessage, setFormMessage] = React.useState("");
|
||||||
|
const [selectedApp, setSelectedApp] = React.useState({});
|
||||||
|
const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
|
||||||
|
|
||||||
|
const innerColor = "rgba(255,255,255,0.65)"
|
||||||
|
const borderRadius = 3
|
||||||
|
window.title = "Shuffle | Apps | Find and integration any app"
|
||||||
|
|
||||||
|
const setUserSpecialzedApp = (user, data) => {
|
||||||
|
// var data = newfields]
|
||||||
|
console.log("data value", data)
|
||||||
|
const appData = {"user_id":user,"specialized_apps":[{}]}
|
||||||
|
console.log("User Check for appdata:", user)
|
||||||
|
appData["specialized_apps"][0]["name"] = data["name"]
|
||||||
|
appData["specialized_apps"][0]["image"] = data["image_url"]
|
||||||
|
appData["specialized_apps"][0]["category"] = data["categories"].toString()
|
||||||
|
console.log("AppData:",appData)
|
||||||
|
console.log("setActionImageList",setActionImageList)
|
||||||
|
console.log("actionImageList",actionImageList)
|
||||||
|
|
||||||
|
const finalData = actionImageList.concat(appData["specialized_apps"])
|
||||||
|
appData["specialized_apps"]=finalData
|
||||||
|
fetch(globalUrl + "/api/v1/users/updateuser", {
|
||||||
|
method: "PUT",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(appData),
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for set creator :O!");
|
||||||
|
}
|
||||||
|
alert.success("Sucessfully updated specialzed app.")
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (!responseJson.success && responseJson.reason !== undefined) {
|
||||||
|
alert.error("Failed updating user: " + responseJson.reason);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const submitContact = (email, message) => {
|
||||||
|
const data = {
|
||||||
|
"firstname": "",
|
||||||
|
"lastname": "",
|
||||||
|
"title": "",
|
||||||
|
"companyname": "",
|
||||||
|
"email": email,
|
||||||
|
"phone": "",
|
||||||
|
"message": message,
|
||||||
|
}
|
||||||
|
|
||||||
|
const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
|
||||||
|
|
||||||
|
fetch(globalUrl+"/api/v1/contact", {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(response => {
|
||||||
|
if (response.success === true) {
|
||||||
|
setFormMessage(response.reason)
|
||||||
|
//alert.info("Thanks for submitting!")
|
||||||
|
} else {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
}
|
||||||
|
|
||||||
|
setFormMail("")
|
||||||
|
setMessage("")
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
console.log(error)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// value={currentRefinement}
|
||||||
|
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
||||||
|
useEffect(() => {
|
||||||
|
//console.log("FIRST LOAD ONLY? RUN REFINEMENT: !", currentRefinement)
|
||||||
|
if (defaultSearch !== undefined && defaultSearch !== null) {
|
||||||
|
refine(defaultSearch)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form noValidate action="" role="search">
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: "100%",}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1em",
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon style={{marginLeft: 5}}/>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
autoComplete='on'
|
||||||
|
type="search"
|
||||||
|
color="primary"
|
||||||
|
defaultValue={defaultSearch}
|
||||||
|
placeholder={`Find ${defaultSearch} Apps...`}
|
||||||
|
id="shuffle_workflow_search_field"
|
||||||
|
onChange={(event) => {
|
||||||
|
refine(event.currentTarget.value)
|
||||||
|
}}
|
||||||
|
limit={5}
|
||||||
|
/>
|
||||||
|
{/*isSearchStalled ? 'My search is stalled' : ''*/}
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
//value={currentRefinement}
|
||||||
|
}
|
||||||
|
|
||||||
|
const Hits = ({ hits }) => {
|
||||||
|
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
|
||||||
|
var counted = 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container spacing={0} style={{border: "1px solid rgba(255,255,255,0.2)", maxHeight: 250, minHeight: 250, overflowY: "auto", overflowX: "hidden", }}>
|
||||||
|
{hits.map((data, index) => {
|
||||||
|
const paperStyle = {
|
||||||
|
backgroundColor: index === mouseHoverIndex ? "rgba(255,255,255,0.8)" : theme.palette.inputColor,
|
||||||
|
color: index === mouseHoverIndex ? theme.palette.inputColor : "rgba(255,255,255,0.8)",
|
||||||
|
border: newSelectedApp.objectID !== data.objectID ? `1px solid rgba(255,255,255,0.2)` : "2px solid #f86a3e",
|
||||||
|
textAlign: "left",
|
||||||
|
padding: 10,
|
||||||
|
cursor: "pointer",
|
||||||
|
position: "relative",
|
||||||
|
overflow: "hidden",
|
||||||
|
width: "100%",
|
||||||
|
minHeight: 37,
|
||||||
|
maxHeight: 52,
|
||||||
|
}
|
||||||
|
|
||||||
|
if (counted === 12/xs*rowHandler) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
counted += 1
|
||||||
|
var parsedname = data.name.valueOf()
|
||||||
|
//for (var key = 0; key < data.name.length; key++) {
|
||||||
|
// var character = data.name.charAt(key)
|
||||||
|
// if (character === character.toUpperCase()) {
|
||||||
|
// //console.log(data.name[key], data.name[key+1])
|
||||||
|
// if (data.name.charAt(key+1) !== undefined && data.name.charAt(key+1) === data.name.charAt(key+1).toUpperCase()) {
|
||||||
|
// } else {
|
||||||
|
// parsedname += " "
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// parsedname += character
|
||||||
|
//}
|
||||||
|
|
||||||
|
parsedname = (parsedname.charAt(0).toUpperCase()+parsedname.substring(1)).replaceAll("_", " ")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Paper key={index} elevation={0} style={paperStyle} onMouseOver={() => {
|
||||||
|
setMouseHoverIndex(index)
|
||||||
|
/*
|
||||||
|
ReactGA.event({
|
||||||
|
category: "app_grid_view",
|
||||||
|
action: `search_bar_click`,
|
||||||
|
label: "",
|
||||||
|
})
|
||||||
|
*/
|
||||||
|
}} onMouseOut={() => {
|
||||||
|
setMouseHoverIndex(-1)
|
||||||
|
}} onClick={() => {
|
||||||
|
if(isCreatorPage === true){
|
||||||
|
console.log("data:",data)
|
||||||
|
console.log("userdata.id",userdata.id)
|
||||||
|
console.log("is creator", isCreatorPage)
|
||||||
|
if (setNewSelectedApp !== undefined) {
|
||||||
|
// setUserSpecialzedApp = data
|
||||||
|
setUserSpecialzedApp(userdata.id, data)
|
||||||
|
//setActionImageList(userdata.id, data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (setNewSelectedApp !== undefined) {
|
||||||
|
setNewSelectedApp(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isCloud) {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "app_search",
|
||||||
|
action: `app_${parsedname}_${data.id}_personalize_click`,
|
||||||
|
label: "",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const queryID = ""
|
||||||
|
|
||||||
|
if (queryID !== undefined && queryID !== null) {
|
||||||
|
try {
|
||||||
|
aa('init', {
|
||||||
|
appId: searchClient.appId,
|
||||||
|
apiKey: searchClient.transporter.headers["x-algolia-api-key"]
|
||||||
|
})
|
||||||
|
|
||||||
|
const timestamp = new Date().getTime()
|
||||||
|
aa('sendEvents', [
|
||||||
|
{
|
||||||
|
eventType: 'conversion',
|
||||||
|
eventName: 'App Framework Activation',
|
||||||
|
index: 'appsearch',
|
||||||
|
objectIDs: [data.objectID],
|
||||||
|
timestamp: timestamp,
|
||||||
|
queryID: queryID,
|
||||||
|
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||||
|
}
|
||||||
|
])
|
||||||
|
} catch (e) {
|
||||||
|
console.log("Failed algolia search update: ", e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<div style={{display: "flex"}}>
|
||||||
|
<img alt={data.name} src={data.image_url} style={{width: "100%", maxWidth: 30, minWidth: 30, minHeight: 30, maxHeight: 30, display: "block", }} />
|
||||||
|
<Typography variant="body1" style={{marginTop: 2, marginLeft: 10, }}>
|
||||||
|
{parsedname}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</Paper>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const InputHits = ConfiguredHits === undefined ? Hits : ConfiguredHits
|
||||||
|
const CustomSearchBox = connectSearchBox(SearchBox)
|
||||||
|
const CustomHits = connectHits(InputHits)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{width: "100%", textAlign: "center", position: "relative", height: "100%",}}>
|
||||||
|
<InstantSearch searchClient={searchClient} indexName="appsearch">
|
||||||
|
{/* showSearch === false ? null :
|
||||||
|
<div style={{maxWidth: 450, margin: "auto", }}>
|
||||||
|
<CustomSearchBox />
|
||||||
|
</div>
|
||||||
|
*/}
|
||||||
|
<div style={{maxWidth: 450, margin: "auto", }}>
|
||||||
|
<CustomSearchBox />
|
||||||
|
</div>
|
||||||
|
<CustomHits hitsPerPage={5}/>
|
||||||
|
</InstantSearch>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Appsearch;
|
||||||
@@ -0,0 +1,190 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
import AppSearch from './Appsearch.jsx';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Paper,
|
||||||
|
Typography,
|
||||||
|
Divider,
|
||||||
|
IconButton,
|
||||||
|
Badge,
|
||||||
|
CircularProgress,
|
||||||
|
Tooltip,
|
||||||
|
Button,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Close as CloseIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
} from "@material-ui/icons";
|
||||||
|
|
||||||
|
const AppSearchPopout = (props) => {
|
||||||
|
const {
|
||||||
|
cy,
|
||||||
|
paperTitle,
|
||||||
|
setPaperTitle,
|
||||||
|
newSelectedApp,
|
||||||
|
setNewSelectedApp,
|
||||||
|
selectionOpen,
|
||||||
|
setSelectionOpen,
|
||||||
|
discoveryData,
|
||||||
|
setDiscoveryData,
|
||||||
|
userdata,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const [defaultSearch, setDefaultSearch] = React.useState(paperTitle !== undefined ? paperTitle : "")
|
||||||
|
|
||||||
|
if (selectionOpen !== true) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// <Paper style={{width: 275, maxHeight: 400, zIndex: 100000, padding: 25, paddingRight: 35, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.2)", position: "absolute", top: -15, left: 50, }}>
|
||||||
|
return (
|
||||||
|
<Paper style={{minWidth: 275, width: 275, minHeight: 400, maxHeight: 400, zIndex: 100000, padding: 25, paddingRight: 35, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.2)", position: "absolute", top: -15, left: 50, }}>
|
||||||
|
{paperTitle !== undefined && paperTitle.length > 0 ?
|
||||||
|
<span>
|
||||||
|
<Typography variant="h6" style={{textAlign: "center"}}>
|
||||||
|
{paperTitle}
|
||||||
|
</Typography>
|
||||||
|
<Divider style={{marginTop: 5, marginBottom: 5 }} />
|
||||||
|
</span>
|
||||||
|
: null}
|
||||||
|
<Tooltip
|
||||||
|
title="Close window"
|
||||||
|
placement="top"
|
||||||
|
style={{ zIndex: 10011 }}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
style={{ zIndex: 12501, position: "absolute", top: 10, right: 10}}
|
||||||
|
onClick={(e) => {
|
||||||
|
//cy.elements().unselectify();
|
||||||
|
if (cy !== undefined) {
|
||||||
|
cy.elements().unselect()
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
setSelectionOpen(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseIcon style={{ color: "white", height: 15, width: 15, }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
{/* {/*Causes errors in Cytoscape. Removing for now.}
|
||||||
|
<Tooltip
|
||||||
|
title="Unselect app"
|
||||||
|
placement="top"
|
||||||
|
style={{ zIndex: 10011 }}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
style={{ zIndex: 12501, position: "absolute", top: 32, right: 10}}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setDiscoveryData({
|
||||||
|
"id": discoveryData.id,
|
||||||
|
"label": discoveryData.label,
|
||||||
|
"name": ""
|
||||||
|
})
|
||||||
|
setNewSelectedApp({
|
||||||
|
"image_url": "",
|
||||||
|
"name": "",
|
||||||
|
"id": "",
|
||||||
|
"objectID": "remove",
|
||||||
|
})
|
||||||
|
setSelectionOpen(true)
|
||||||
|
setDefaultSearch("")
|
||||||
|
|
||||||
|
const foundelement = cy.getElementById(discoveryData.id)
|
||||||
|
if (foundelement !== undefined && foundelement !== null) {
|
||||||
|
console.log("element: ", foundelement)
|
||||||
|
foundelement.data("large_image", discoveryData.large_image)
|
||||||
|
foundelement.data("text_margin_y", "14px")
|
||||||
|
foundelement.data("margin_x", "32px")
|
||||||
|
foundelement.data("margin_y", "19x")
|
||||||
|
foundelement.data("width", "45px")
|
||||||
|
foundelement.data("height", "45px")
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setDiscoveryData({})
|
||||||
|
setNewSelectedApp({})
|
||||||
|
}, 1000)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteIcon style={{ color: "white", height: 15, width: 15, }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
*/}
|
||||||
|
<div style={{display: "flex"}}>
|
||||||
|
{discoveryData.name !== undefined && discoveryData.name !== null && discoveryData.name.length > 0 ?
|
||||||
|
<div style={{border: "1px solid rgba(255,255,255,0.2)", borderRadius: 25, height: 40, width: 40, textAlign: "center", overflow: "hidden",}}>
|
||||||
|
|
||||||
|
<img alt={discoveryData.id} src={newSelectedApp.image_url !== undefined && newSelectedApp.image_url !== null && newSelectedApp.image_url.length > 0 ? newSelectedApp.image_url : discoveryData.large_image} style={{height: 40, width: 40, margin: "auto",}}/>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<img alt={discoveryData.id} src={discoveryData.large_image} style={{height: 40,}}/>
|
||||||
|
}
|
||||||
|
<Typography variant="body1" style={{marginLeft: 10, marginTop: 6}}>
|
||||||
|
{discoveryData.name !== undefined && discoveryData.name !== null && discoveryData.name.length > 0 ?
|
||||||
|
discoveryData.name
|
||||||
|
:
|
||||||
|
newSelectedApp.name !== undefined && newSelectedApp.name !== null && newSelectedApp.name.length > 0 ?
|
||||||
|
newSelectedApp.name
|
||||||
|
:
|
||||||
|
`No ${discoveryData.label} app chosen`
|
||||||
|
}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{discoveryData !== undefined && discoveryData.name !== undefined && discoveryData.name !== null && discoveryData.name.length > 0 ?
|
||||||
|
<span>
|
||||||
|
<Typography variant="body2" color="textSecondary" style={{marginTop: 10, marginBottom: 10, maxHeight: 75, overflowY: "auto", overflowX: "hidden", }}>
|
||||||
|
{discoveryData.description}
|
||||||
|
</Typography>
|
||||||
|
{/*isCloud && defaultSearch !== undefined && defaultSearch.length > 0 ?
|
||||||
|
{<
|
||||||
|
newSelectedApp={newSelectedApp}
|
||||||
|
setNewSelectedApp={setNewSelectedApp}
|
||||||
|
defaultSearch={defaultSearch}
|
||||||
|
/>}
|
||||||
|
:
|
||||||
|
null
|
||||||
|
*/}
|
||||||
|
</span>
|
||||||
|
:
|
||||||
|
selectionOpen
|
||||||
|
?
|
||||||
|
<span>
|
||||||
|
<Typography variant="body2" color="textSecondary" style={{marginTop: 10}}>
|
||||||
|
Click an app below to select it
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
:
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
style={{marginTop: 10, }}
|
||||||
|
onClick={() => {
|
||||||
|
setSelectionOpen(true)
|
||||||
|
setDefaultSearch(discoveryData.label)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Choose {discoveryData.label} app
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div style={{marginTop: 10}}>
|
||||||
|
{selectionOpen ?
|
||||||
|
<AppSearch
|
||||||
|
defaultSearch={defaultSearch}
|
||||||
|
newSelectedApp={newSelectedApp}
|
||||||
|
setNewSelectedApp={setNewSelectedApp}
|
||||||
|
userdata={userdata}
|
||||||
|
/>
|
||||||
|
: null}
|
||||||
|
</div>
|
||||||
|
</Paper>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AppSearchPopout;
|
||||||
@@ -0,0 +1,278 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
import { useAlert } from "react-alert";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
IconButton,
|
||||||
|
ListItem,
|
||||||
|
ListItemText,
|
||||||
|
FormGroup,
|
||||||
|
FormControl,
|
||||||
|
InputLabel,
|
||||||
|
FormLabel,
|
||||||
|
FormControlLabel,
|
||||||
|
Select,
|
||||||
|
MenuItem,
|
||||||
|
Grid,
|
||||||
|
Paper,
|
||||||
|
Typography,
|
||||||
|
TextField,
|
||||||
|
Zoom,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Edit as EditIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
SelectAll as SelectAllIcon,
|
||||||
|
} from "@material-ui/icons";
|
||||||
|
|
||||||
|
const AuthenticationItem = (props) => {
|
||||||
|
const { data, index, globalUrl, getAppAuthentication } = props
|
||||||
|
|
||||||
|
const [selectedAuthentication, setSelectedAuthentication] = React.useState({})
|
||||||
|
const [selectedAuthenticationModalOpen, setSelectedAuthenticationModalOpen] = React.useState(false);
|
||||||
|
const [authenticationFields, setAuthenticationFields] = React.useState([]);
|
||||||
|
|
||||||
|
const alert = useAlert();
|
||||||
|
var bgColor = "#27292d";
|
||||||
|
if (index % 2 === 0) {
|
||||||
|
bgColor = "#1f2023";
|
||||||
|
}
|
||||||
|
|
||||||
|
//console.log("Auth data: ", data)
|
||||||
|
if (data.type === "oauth2") {
|
||||||
|
data.fields = [
|
||||||
|
{
|
||||||
|
key: "url",
|
||||||
|
value: "Secret. Replaced during app execution!",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "client_id",
|
||||||
|
value: "Secret. Replaced during app execution!",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "client_secret",
|
||||||
|
value: "Secret. Replaced during app execution!",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "scope",
|
||||||
|
value: "Secret. Replaced during app execution!",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteAuthentication = (data) => {
|
||||||
|
alert.info("Deleting auth " + data.label);
|
||||||
|
|
||||||
|
// Just use this one?
|
||||||
|
const url = globalUrl + "/api/v1/apps/authentication/" + data.id;
|
||||||
|
console.log("URL: ", url);
|
||||||
|
fetch(url, {
|
||||||
|
method: "DELETE",
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((response) =>
|
||||||
|
response.json().then((responseJson) => {
|
||||||
|
console.log("RESP: ", responseJson);
|
||||||
|
if (responseJson["success"] === false) {
|
||||||
|
alert.error("Failed deleting auth");
|
||||||
|
} else {
|
||||||
|
// Need to wait because query in ES is too fast
|
||||||
|
setTimeout(() => {
|
||||||
|
getAppAuthentication();
|
||||||
|
}, 1000);
|
||||||
|
//alert.success("Successfully deleted authentication!")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.catch((error) => {
|
||||||
|
console.log("Error in userdata: ", error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const editAuthenticationConfig = (id) => {
|
||||||
|
const data = {
|
||||||
|
id: id,
|
||||||
|
action: "assign_everywhere",
|
||||||
|
};
|
||||||
|
const url = globalUrl + "/api/v1/apps/authentication/" + id + "/config";
|
||||||
|
|
||||||
|
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) {
|
||||||
|
alert.error("Failed overwriting appauth in workflows");
|
||||||
|
} else {
|
||||||
|
alert.success("Successfully updated auth everywhere!");
|
||||||
|
//setSelectedUserModalOpen(false);
|
||||||
|
setTimeout(() => {
|
||||||
|
getAppAuthentication();
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error("Err: " + error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateAppAuthentication = (field) => {
|
||||||
|
setSelectedAuthenticationModalOpen(true);
|
||||||
|
setSelectedAuthentication(field);
|
||||||
|
//{selectedAuthentication.fields.map((data, index) => {
|
||||||
|
var newfields = [];
|
||||||
|
for (var key in field.fields) {
|
||||||
|
newfields.push({
|
||||||
|
key: field.fields[key].key,
|
||||||
|
value: "",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setAuthenticationFields(newfields);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ListItem key={index} style={{ backgroundColor: bgColor }}>
|
||||||
|
<ListItemText
|
||||||
|
primary=<img
|
||||||
|
alt=""
|
||||||
|
src={data.app.large_image}
|
||||||
|
style={{
|
||||||
|
maxWidth: 50,
|
||||||
|
borderRadius: theme.palette.borderRadius,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
style={{ minWidth: 75, maxWidth: 75 }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary={data.label}
|
||||||
|
style={{
|
||||||
|
minWidth: 225,
|
||||||
|
maxWidth: 225,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary={data.app.name}
|
||||||
|
style={{ minWidth: 175, maxWidth: 175, marginLeft: 10 }}
|
||||||
|
/>
|
||||||
|
{/*
|
||||||
|
<ListItemText
|
||||||
|
primary={data.defined === false ? "No" : "Yes"}
|
||||||
|
style={{ minWidth: 100, maxWidth: 100, }}
|
||||||
|
/>
|
||||||
|
*/}
|
||||||
|
<ListItemText
|
||||||
|
primary={
|
||||||
|
data.workflow_count === null ? 0 : data.workflow_count
|
||||||
|
}
|
||||||
|
style={{
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
textAlign: "center",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/*
|
||||||
|
<ListItemText
|
||||||
|
primary={data.node_count}
|
||||||
|
style={{
|
||||||
|
minWidth: 110,
|
||||||
|
maxWidth: 110,
|
||||||
|
textAlign: "center",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
*/}
|
||||||
|
<ListItemText
|
||||||
|
primary={
|
||||||
|
data.fields === null || data.fields === undefined
|
||||||
|
? ""
|
||||||
|
: data.fields
|
||||||
|
.map((data) => {
|
||||||
|
return data.key;
|
||||||
|
})
|
||||||
|
.join(", ")
|
||||||
|
}
|
||||||
|
style={{
|
||||||
|
minWidth: 125,
|
||||||
|
maxWidth: 125,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
style={{
|
||||||
|
maxWidth: 230,
|
||||||
|
minWidth: 230,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
primary={new Date(data.created * 1000).toISOString()}
|
||||||
|
/>
|
||||||
|
<ListItemText>
|
||||||
|
<IconButton
|
||||||
|
onClick={() => {
|
||||||
|
updateAppAuthentication(data);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EditIcon color="primary" />
|
||||||
|
</IconButton>
|
||||||
|
{data.defined ? (
|
||||||
|
<Tooltip
|
||||||
|
color="primary"
|
||||||
|
title="Set in EVERY workflow"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
style={{ marginRight: 10 }}
|
||||||
|
disabled={data.defined === false}
|
||||||
|
onClick={() => {
|
||||||
|
editAuthenticationConfig(data.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectAllIcon
|
||||||
|
color={data.defined ? "primary" : "secondary"}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
) : (
|
||||||
|
<Tooltip
|
||||||
|
color="primary"
|
||||||
|
title="Must edit before you can set in all workflows"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
style={{ marginRight: 10 }}
|
||||||
|
onClick={() => {}}
|
||||||
|
>
|
||||||
|
<SelectAllIcon
|
||||||
|
color={data.defined ? "primary" : "secondary"}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
<IconButton
|
||||||
|
onClick={() => {
|
||||||
|
deleteAuthentication(data);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteIcon color="primary" />
|
||||||
|
</IconButton>
|
||||||
|
</ListItemText>
|
||||||
|
</ListItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuthenticationItem
|
||||||
@@ -0,0 +1,366 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
import { v4 as uuidv4 } from "uuid";
|
||||||
|
|
||||||
|
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Divider,
|
||||||
|
Select,
|
||||||
|
MenuItem,
|
||||||
|
TextField,
|
||||||
|
DialogActions,
|
||||||
|
DialogTitle,
|
||||||
|
DialogContent,
|
||||||
|
Typography,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
LockOpen as LockOpenIcon,
|
||||||
|
} from "@material-ui/icons";
|
||||||
|
|
||||||
|
const AuthenticationData = (props) => {
|
||||||
|
const {
|
||||||
|
globalUrl,
|
||||||
|
saveWorkflow,
|
||||||
|
selectedApp,
|
||||||
|
workflow,
|
||||||
|
selectedAction,
|
||||||
|
authenticationType,
|
||||||
|
getAppAuthentication,
|
||||||
|
appAuthentication,
|
||||||
|
setSelectedAction,
|
||||||
|
setAuthenticationModalOpen,
|
||||||
|
isCloud,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const setNewAppAuth = (appAuthData) => {
|
||||||
|
console.log("DAta: ", appAuthData);
|
||||||
|
fetch(globalUrl + "/api/v1/apps/authentication", {
|
||||||
|
method: "PUT",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(appAuthData),
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for setting app auth :O!");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (!responseJson.success) {
|
||||||
|
alert.error("Failed to set app auth: " + responseJson.reason);
|
||||||
|
} else {
|
||||||
|
if (getAppAuthentication !== undefined) {
|
||||||
|
getAppAuthentication()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (setAuthenticationModalOpen !== undefined) {
|
||||||
|
setAuthenticationModalOpen(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Needs a refresh with the new authentication..
|
||||||
|
//alert.success("Successfully saved new app auth")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
//alert.error(error.toString());
|
||||||
|
console.log("New auth error: ", error.toString());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const [authenticationOption, setAuthenticationOptions] = React.useState({
|
||||||
|
app: JSON.parse(JSON.stringify(selectedApp)),
|
||||||
|
fields: {},
|
||||||
|
label: "",
|
||||||
|
usage: [
|
||||||
|
{
|
||||||
|
workflow_id: workflow.id,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
id: uuidv4(),
|
||||||
|
active: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (
|
||||||
|
selectedApp.authentication === undefined ||
|
||||||
|
selectedApp.authentication.parameters === null ||
|
||||||
|
selectedApp.authentication.parameters === undefined ||
|
||||||
|
selectedApp.authentication.parameters.length === 0
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<DialogContent style={{ textAlign: "center", marginTop: 50 }}>
|
||||||
|
<Typography variant="h4" id="draggable-dialog-title" style={{cursor: "move",}}>
|
||||||
|
{selectedApp.name} does not require authentication
|
||||||
|
</Typography>
|
||||||
|
</DialogContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
authenticationOption.app.actions = [];
|
||||||
|
|
||||||
|
for (var key in selectedApp.authentication.parameters) {
|
||||||
|
if (
|
||||||
|
authenticationOption.fields[
|
||||||
|
selectedApp.authentication.parameters[key].name
|
||||||
|
] === undefined
|
||||||
|
) {
|
||||||
|
authenticationOption.fields[
|
||||||
|
selectedApp.authentication.parameters[key].name
|
||||||
|
] = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmitCheck = () => {
|
||||||
|
console.log("NEW AUTH: ", authenticationOption);
|
||||||
|
if (authenticationOption.label.length === 0) {
|
||||||
|
authenticationOption.label = `Auth for ${selectedApp.name}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Automatically mapping fields that already exist (predefined).
|
||||||
|
// Warning if fields are NOT filled
|
||||||
|
for (var key in selectedApp.authentication.parameters) {
|
||||||
|
if (
|
||||||
|
authenticationOption.fields[
|
||||||
|
selectedApp.authentication.parameters[key].name
|
||||||
|
].length === 0
|
||||||
|
) {
|
||||||
|
if (
|
||||||
|
selectedApp.authentication.parameters[key].value !== undefined &&
|
||||||
|
selectedApp.authentication.parameters[key].value !== null &&
|
||||||
|
selectedApp.authentication.parameters[key].value.length > 0
|
||||||
|
) {
|
||||||
|
authenticationOption.fields[
|
||||||
|
selectedApp.authentication.parameters[key].name
|
||||||
|
] = selectedApp.authentication.parameters[key].value;
|
||||||
|
} else {
|
||||||
|
if (
|
||||||
|
selectedApp.authentication.parameters[key].schema.type === "bool"
|
||||||
|
) {
|
||||||
|
authenticationOption.fields[
|
||||||
|
selectedApp.authentication.parameters[key].name
|
||||||
|
] = "false";
|
||||||
|
} else {
|
||||||
|
alert.info(
|
||||||
|
"Field " +
|
||||||
|
selectedApp.authentication.parameters[key].name +
|
||||||
|
" can't be empty"
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Action: ", selectedAction);
|
||||||
|
selectedAction.authentication_id = authenticationOption.id;
|
||||||
|
selectedAction.selectedAuthentication = authenticationOption;
|
||||||
|
if (
|
||||||
|
selectedAction.authentication === undefined ||
|
||||||
|
selectedAction.authentication === null
|
||||||
|
) {
|
||||||
|
selectedAction.authentication = [authenticationOption];
|
||||||
|
} else {
|
||||||
|
selectedAction.authentication.push(authenticationOption);
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedAction(selectedAction);
|
||||||
|
|
||||||
|
var newAuthOption = JSON.parse(JSON.stringify(authenticationOption));
|
||||||
|
var newFields = [];
|
||||||
|
for (const key in newAuthOption.fields) {
|
||||||
|
const value = newAuthOption.fields[key];
|
||||||
|
newFields.push({
|
||||||
|
key: key,
|
||||||
|
value: value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("FIELDS: ", newFields);
|
||||||
|
newAuthOption.fields = newFields;
|
||||||
|
setNewAppAuth(newAuthOption);
|
||||||
|
|
||||||
|
//if (configureWorkflowModalOpen) {
|
||||||
|
// setSelectedAction({});
|
||||||
|
//}
|
||||||
|
|
||||||
|
//setUpdate(authenticationOption.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (
|
||||||
|
authenticationOption.label === null ||
|
||||||
|
authenticationOption.label === undefined
|
||||||
|
) {
|
||||||
|
authenticationOption.label = selectedApp.name + " authentication";
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<DialogTitle id="draggable-dialog-title" style={{cursor: "move",}}>
|
||||||
|
<div style={{ color: "white" }}>
|
||||||
|
Authentication for {selectedApp.name}
|
||||||
|
</div>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
href="https://shuffler.io/docs/apps#authentication"
|
||||||
|
style={{ textDecoration: "none", color: "#f85a3e" }}
|
||||||
|
>
|
||||||
|
What is app authentication?
|
||||||
|
</a>
|
||||||
|
<div />
|
||||||
|
These are required fields for authenticating with {selectedApp.name}
|
||||||
|
<div style={{ marginTop: 15 }} />
|
||||||
|
<b>Name - what is this used for?</b>
|
||||||
|
<TextField
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme.palette.inputColor,
|
||||||
|
borderRadius: theme.palette.borderRadius,
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
color: "white",
|
||||||
|
marginLeft: "5px",
|
||||||
|
maxWidth: "95%",
|
||||||
|
height: 50,
|
||||||
|
fontSize: "1em",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
fullWidth
|
||||||
|
color="primary"
|
||||||
|
placeholder={"Auth july 2020"}
|
||||||
|
defaultValue={`Auth for ${selectedApp.name}`}
|
||||||
|
onChange={(event) => {
|
||||||
|
authenticationOption.label = event.target.value;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Divider
|
||||||
|
style={{
|
||||||
|
marginTop: 15,
|
||||||
|
marginBottom: 15,
|
||||||
|
backgroundColor: "rgb(91, 96, 100)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div />
|
||||||
|
{selectedApp.authentication.parameters.map((data, index) => {
|
||||||
|
return (
|
||||||
|
<div key={index} style={{ marginTop: 10 }}>
|
||||||
|
<LockOpenIcon style={{ marginRight: 10 }} />
|
||||||
|
<b>{data.name}</b>
|
||||||
|
|
||||||
|
{data.schema !== undefined &&
|
||||||
|
data.schema !== null &&
|
||||||
|
data.schema.type === "bool" ? (
|
||||||
|
<Select
|
||||||
|
MenuProps={{
|
||||||
|
disableScrollLock: true,
|
||||||
|
}}
|
||||||
|
SelectDisplayProps={{
|
||||||
|
style: {
|
||||||
|
marginLeft: 10,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
defaultValue={"false"}
|
||||||
|
fullWidth
|
||||||
|
onChange={(e) => {
|
||||||
|
console.log("Value: ", e.target.value);
|
||||||
|
authenticationOption.fields[data.name] = e.target.value;
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme.palette.surfaceColor,
|
||||||
|
color: "white",
|
||||||
|
height: 50,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem
|
||||||
|
key={"false"}
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme.palette.inputColor,
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
value={"false"}
|
||||||
|
>
|
||||||
|
false
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
key={"true"}
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme.palette.inputColor,
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
value={"true"}
|
||||||
|
>
|
||||||
|
true
|
||||||
|
</MenuItem>
|
||||||
|
</Select>
|
||||||
|
) : (
|
||||||
|
<TextField
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme.palette.inputColor,
|
||||||
|
borderRadius: theme.palette.borderRadius,
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
color: "white",
|
||||||
|
marginLeft: "5px",
|
||||||
|
maxWidth: "95%",
|
||||||
|
height: 50,
|
||||||
|
fontSize: "1em",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
fullWidth
|
||||||
|
type={
|
||||||
|
data.example !== undefined && data.example.includes("***")
|
||||||
|
? "password"
|
||||||
|
: "text"
|
||||||
|
}
|
||||||
|
color="primary"
|
||||||
|
defaultValue={
|
||||||
|
data.value !== undefined && data.value !== null
|
||||||
|
? data.value
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
placeholder={data.example}
|
||||||
|
onChange={(event) => {
|
||||||
|
authenticationOption.fields[data.name] =
|
||||||
|
event.target.value;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button
|
||||||
|
style={{ borderRadius: "0px" }}
|
||||||
|
onClick={() => {
|
||||||
|
setAuthenticationModalOpen(false);
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
style={{ borderRadius: "0px" }}
|
||||||
|
onClick={() => {
|
||||||
|
setAuthenticationOptions(authenticationOption);
|
||||||
|
handleSubmitCheck();
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AuthenticationData
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import ReactGA from 'react-ga4';
|
||||||
|
import theme from "../theme.jsx";
|
||||||
|
|
||||||
|
import { useTheme } from "@material-ui/core/styles";
|
||||||
|
import {
|
||||||
|
Paper,
|
||||||
|
Typography,
|
||||||
|
Divider,
|
||||||
|
Button,
|
||||||
|
Grid,
|
||||||
|
Card,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import { useAlert } from "react-alert";
|
||||||
|
|
||||||
|
const Branding = (props) => {
|
||||||
|
const { globalUrl, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, } = props;
|
||||||
|
const alert = useAlert();
|
||||||
|
const [publishingInfo, setPublishingInfo] = useState("");
|
||||||
|
|
||||||
|
// Should enable / disable org branding
|
||||||
|
const handleChangePublishing = () => {
|
||||||
|
console.log("Handle change publishing");
|
||||||
|
}
|
||||||
|
|
||||||
|
const isOrganizationReady = () => {
|
||||||
|
// A simple checklist to ensure the button shows up properly
|
||||||
|
if (selectedOrganization.name === selectedOrganization.org) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedOrganization.large_image === "" || selectedOrganization.large_image === theme.palette.defaultImage) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Typography variant="h6" style={{ marginTop: 20, marginBottom: 10 }}>
|
||||||
|
Branding
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1" color="textSecondary" style={{ marginTop: 20, marginBottom: 10 }}>
|
||||||
|
You can customize your organization's branding by uploading a logo, changing the color scheme and a lot more.
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Divider style={{marginTop: 50, marginBottom: 50, }} />
|
||||||
|
<h2>
|
||||||
|
Creator Network
|
||||||
|
</h2>
|
||||||
|
<div style={{ display: "flex", width: 700, }}>
|
||||||
|
<div>
|
||||||
|
<span>
|
||||||
|
<Typography variant="body1" color="textSecondary">
|
||||||
|
By changing publishing settings, you agree to our <a href="/docs/terms_of_service" target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}}>Terms of Service</a>, and acknowledge that your organization's non-sensitive data will be turned into a <a target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}} href="https://shuffler.io/creators">creator account</a>. Support: support@shuffler.io
|
||||||
|
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
style={{ height: 40, marginTop: 10, width: 300, }}
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
disabled={() => {
|
||||||
|
return isOrganizationReady()
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
handleChangePublishing();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Join Creator Network
|
||||||
|
</Button>
|
||||||
|
<Typography variant="body1" color="textSecondary" style={{ marginTop: 20, marginBottom: 10 }}>
|
||||||
|
{publishingInfo}
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Branding;
|
||||||
@@ -0,0 +1,427 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import theme from "../theme.jsx";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
Divider,
|
||||||
|
TextField,
|
||||||
|
Button,
|
||||||
|
Tabs,
|
||||||
|
Tab,
|
||||||
|
Grid,
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListItemText,
|
||||||
|
IconButton,
|
||||||
|
Dialog,
|
||||||
|
DialogTitle,
|
||||||
|
DialogActions,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
import { useAlert } from "react-alert";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Edit as EditIcon,
|
||||||
|
FileCopy as FileCopyIcon,
|
||||||
|
SelectAll as SelectAllIcon,
|
||||||
|
OpenInNew as OpenInNewIcon,
|
||||||
|
CloudDownload as CloudDownloadIcon,
|
||||||
|
Description as DescriptionIcon,
|
||||||
|
Polymer as PolymerIcon,
|
||||||
|
CheckCircle as CheckCircleIcon,
|
||||||
|
Close as CloseIcon,
|
||||||
|
Apps as AppsIcon,
|
||||||
|
Image as ImageIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
Cached as CachedIcon,
|
||||||
|
AccessibilityNew as AccessibilityNewIcon,
|
||||||
|
Lock as LockIcon,
|
||||||
|
Eco as EcoIcon,
|
||||||
|
Schedule as ScheduleIcon,
|
||||||
|
Cloud as CloudIcon,
|
||||||
|
Business as BusinessIcon,
|
||||||
|
Visibility as VisibilityIcon,
|
||||||
|
VisibilityOff as VisibilityOffIcon,
|
||||||
|
} from "@material-ui/icons";
|
||||||
|
|
||||||
|
const CacheView = (props) => {
|
||||||
|
const { globalUrl, userdata, serverside, orgId } = props;
|
||||||
|
const [orgCache, setOrgCache] = React.useState("");
|
||||||
|
const [listCache, setListCache] = React.useState([]);
|
||||||
|
const [addCache, setAddCache] = React.useState("");
|
||||||
|
const [modalOpen, setModalOpen] = React.useState(false);
|
||||||
|
const [key, setKey]= React.useState("");
|
||||||
|
const [value, setValue]= React.useState("");
|
||||||
|
const [cacheInput, setCacheInput]= React.useState("");
|
||||||
|
const [cacheCursor, setCacheCursor]= React.useState("");
|
||||||
|
|
||||||
|
const alert = useAlert();
|
||||||
|
useEffect(() => {
|
||||||
|
listOrgCache(orgId);
|
||||||
|
console.log("orgid", orgId);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const listOrgCache = (orgId) => {
|
||||||
|
fetch(globalUrl + `/api/v1/orgs/${orgId}/list_cache`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson.success === true) {
|
||||||
|
setListCache(responseJson.keys);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (responseJson.cursor !== undefined && responseJson.cursor !== null && responseJson.cursor !== "") {
|
||||||
|
setCacheCursor(responseJson.cursor);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// const getCacheList = (orgId) => {
|
||||||
|
// fetch(`${globalUrl}/api/v1/orgs/${orgId}/get_cache`, {
|
||||||
|
// method: "GET",
|
||||||
|
// headers: {
|
||||||
|
// "Content-Type": "application/json",
|
||||||
|
// Accept: "application/json",
|
||||||
|
// },
|
||||||
|
// credentials: "include",
|
||||||
|
// })
|
||||||
|
// .then((response) => {
|
||||||
|
// if (response.status !== 200) {
|
||||||
|
// console.log("Status not 200 for WORKFLOW EXECUTION :O!");
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// return response.json();
|
||||||
|
// })
|
||||||
|
// .then((responseJson) => {
|
||||||
|
// if (responseJson.success !== false) {
|
||||||
|
// console.log("Found cache: ", responseJson)
|
||||||
|
// setListCache(responseJson)
|
||||||
|
// } else {
|
||||||
|
// console.log("Couldn't find the creator profile (rerun?): ", responseJson)
|
||||||
|
// // If the current user is any of the Shuffle Creators
|
||||||
|
// // AND the workflow doesn't have an owner: allow editing.
|
||||||
|
// // else: Allow suggestions?
|
||||||
|
// //console.log("User: ", userdata)
|
||||||
|
// //if (rerun !== true) {
|
||||||
|
// // getUserProfile(userdata.id, true)
|
||||||
|
// //}
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch((error) => {
|
||||||
|
// console.log("Get userprofile error: ", error);
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
const deleteCache = (orgId, key) => {
|
||||||
|
alert.info("Attempting to delete Cache");
|
||||||
|
fetch(globalUrl + `/api/v1/orgs/${orgId}/cache/${key}`, {
|
||||||
|
method: "DELETE",
|
||||||
|
headers: {
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status === 200) {
|
||||||
|
alert.success("Successfully deleted Cache");
|
||||||
|
setTimeout(() => {
|
||||||
|
listOrgCache(orgId);
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
alert.error("Failed deleting Cache. Does it still exist?");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const addOrgCache = (orgId) => {
|
||||||
|
const cache={key:key,value:value};
|
||||||
|
setCacheInput([cache]);
|
||||||
|
console.log("cache input:",cacheInput)
|
||||||
|
|
||||||
|
fetch(globalUrl + `/api/v1/orgs/${orgId}/set_cache`, {
|
||||||
|
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(cache),
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
setAddCache(responseJson);
|
||||||
|
alert.success("New Cache Added Successfully!");
|
||||||
|
listOrgCache(orgId);
|
||||||
|
setModalOpen(false);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const modalView = (
|
||||||
|
<Dialog
|
||||||
|
open={modalOpen}
|
||||||
|
onClose={() => {
|
||||||
|
setModalOpen(false);
|
||||||
|
}}
|
||||||
|
PaperProps={{
|
||||||
|
style: {
|
||||||
|
backgroundColor: theme.palette.surfaceColor,
|
||||||
|
color: "white",
|
||||||
|
minWidth: "800px",
|
||||||
|
minHeight: "320px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DialogTitle>
|
||||||
|
<span style={{ color: "white" }}>
|
||||||
|
Add Cache
|
||||||
|
</span>
|
||||||
|
</DialogTitle>
|
||||||
|
<div style={{paddingLeft: "30px", paddingRight: '30px'}}>
|
||||||
|
Key
|
||||||
|
<TextField
|
||||||
|
color="primary"
|
||||||
|
style={{ backgroundColor: theme.palette.inputColor }}
|
||||||
|
autoFocus
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
height: "50px",
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1em",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
fullWidth={true}
|
||||||
|
autoComplete="Key"
|
||||||
|
placeholder="abc"
|
||||||
|
id="keyfield"
|
||||||
|
margin="normal"
|
||||||
|
variant="outlined"
|
||||||
|
value={key}
|
||||||
|
onChange={(e)=>setKey(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style={{paddingLeft: "30px", paddingRight: '30px'}}>
|
||||||
|
Value
|
||||||
|
<TextField
|
||||||
|
color="primary"
|
||||||
|
style={{ backgroundColor: theme.palette.inputColor }}
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
height: "50px",
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1em",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
fullWidth={true}
|
||||||
|
autoComplete="Value"
|
||||||
|
placeholder="123"
|
||||||
|
id="Valuefield"
|
||||||
|
margin="normal"
|
||||||
|
variant="outlined"
|
||||||
|
value={value}
|
||||||
|
onChange={(e)=>setValue(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<DialogActions style={{paddingLeft: "30px", paddingRight: '30px'}}>
|
||||||
|
<Button
|
||||||
|
style={{ borderRadius: "0px" }}
|
||||||
|
onClick={() => setModalOpen(false)}
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
style={{ borderRadius: "0px" }}
|
||||||
|
onClick={() => {
|
||||||
|
addOrgCache(orgId)
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{modalView}
|
||||||
|
<div style={{ marginTop: 20, marginBottom: 20 }}>
|
||||||
|
<h2 style={{ display: "inline" }}>Shuffle Datastore</h2>
|
||||||
|
<span style={{ marginLeft: 25 }}>
|
||||||
|
Datastore is a key-value store for storing data that can be used cross-workflow.
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
href="/docs/organizations#datastore"
|
||||||
|
style={{ textDecoration: "none", color: "#f85a3e" }}
|
||||||
|
>
|
||||||
|
Learn more
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
style={{}}
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
onClick={() => setModalOpen(true)}
|
||||||
|
>
|
||||||
|
Add Cache
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
style={{ marginLeft: 5, marginRight: 15 }}
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
onClick={() => listOrgCache(orgId)}
|
||||||
|
>
|
||||||
|
<CachedIcon />
|
||||||
|
</Button>
|
||||||
|
<Divider
|
||||||
|
style={{
|
||||||
|
marginTop: 20,
|
||||||
|
marginBottom: 20,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<List>
|
||||||
|
<ListItem>
|
||||||
|
<ListItemText
|
||||||
|
primary="Key"
|
||||||
|
// style={{ minWidth: 150, maxWidth: 150 }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="value"
|
||||||
|
// style={{ minWidth: 150, maxWidth: 150 }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Updated"
|
||||||
|
// style={{ minWidth: 150, maxWidth: 150 }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Actions"
|
||||||
|
// style={{ minWidth: 150, maxWidth: 150 }}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
{listCache === undefined || listCache === null
|
||||||
|
? null
|
||||||
|
: listCache.map((data, index) => {
|
||||||
|
var bgColor = "#27292d";
|
||||||
|
if (index % 2 === 0) {
|
||||||
|
bgColor = "#1f2023";
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ListItem key={index} style={{ backgroundColor: bgColor }}>
|
||||||
|
<ListItemText
|
||||||
|
style={{
|
||||||
|
maxWidth: 225,
|
||||||
|
minWidth: 225,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
primary={data.key}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
style={{
|
||||||
|
maxWidth: 225,
|
||||||
|
minWidth: 225,
|
||||||
|
overflow: "hidden",
|
||||||
|
paddingLeft: "52px",
|
||||||
|
}}
|
||||||
|
// style={{ maxWidth: 100, minWidth: 100 }}
|
||||||
|
primary={data.value} />
|
||||||
|
<ListItemText
|
||||||
|
style={{
|
||||||
|
maxWidth: 225,
|
||||||
|
minWidth: 225,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
primary={new Date(data.edited * 1000).toISOString()}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
style={{
|
||||||
|
minWidth: 250,
|
||||||
|
maxWidth: 250,
|
||||||
|
overflow: "hidden",
|
||||||
|
paddingLeft: "155px",
|
||||||
|
}}
|
||||||
|
primary=<span style={{ display: "inline" }}>
|
||||||
|
{/* <Tooltip
|
||||||
|
title="Edit"
|
||||||
|
style={{}}
|
||||||
|
aria-label={"Edit"}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<IconButton
|
||||||
|
style={{ padding: "6px" }}
|
||||||
|
onClick={() => {
|
||||||
|
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EditIcon
|
||||||
|
style={{ color: "white" }}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</span>
|
||||||
|
</Tooltip> */}
|
||||||
|
<Tooltip
|
||||||
|
title={"Delete Cache"}
|
||||||
|
style={{ marginLeft: 15, }}
|
||||||
|
aria-label={"Delete"}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<IconButton
|
||||||
|
style={{ padding: "6px" }}
|
||||||
|
onClick={() => {
|
||||||
|
deleteCache(orgId, data.key);
|
||||||
|
//deleteFile(orgId);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteIcon
|
||||||
|
style={{ color: "white" }}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
</span>
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</List>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default CacheView;
|
||||||
@@ -0,0 +1,434 @@
|
|||||||
|
const countries = [
|
||||||
|
{ code: 'GB', label: 'United Kingdom', phone: '44' },
|
||||||
|
{
|
||||||
|
code: 'US',
|
||||||
|
label: 'United States',
|
||||||
|
phone: '1',
|
||||||
|
suggested: true,
|
||||||
|
},
|
||||||
|
{ code: 'IN', label: 'India', phone: '91' },
|
||||||
|
{ code: 'AD', label: 'Andorra', phone: '376' },
|
||||||
|
{
|
||||||
|
code: 'AE',
|
||||||
|
label: 'United Arab Emirates',
|
||||||
|
phone: '971',
|
||||||
|
},
|
||||||
|
{ code: 'AF', label: 'Afghanistan', phone: '93' },
|
||||||
|
{
|
||||||
|
code: 'AG',
|
||||||
|
label: 'Antigua and Barbuda',
|
||||||
|
phone: '1-268',
|
||||||
|
},
|
||||||
|
{ code: 'AI', label: 'Anguilla', phone: '1-264' },
|
||||||
|
{ code: 'AL', label: 'Albania', phone: '355' },
|
||||||
|
{ code: 'AM', label: 'Armenia', phone: '374' },
|
||||||
|
{ code: 'AO', label: 'Angola', phone: '244' },
|
||||||
|
{ code: 'AQ', label: 'Antarctica', phone: '672' },
|
||||||
|
{ code: 'AR', label: 'Argentina', phone: '54' },
|
||||||
|
{ code: 'AS', label: 'American Samoa', phone: '1-684' },
|
||||||
|
{ code: 'AT', label: 'Austria', phone: '43' },
|
||||||
|
{
|
||||||
|
code: 'AU',
|
||||||
|
label: 'Australia',
|
||||||
|
phone: '61',
|
||||||
|
suggested: true,
|
||||||
|
},
|
||||||
|
{ code: 'AW', label: 'Aruba', phone: '297' },
|
||||||
|
{ code: 'AX', label: 'Alland Islands', phone: '358' },
|
||||||
|
{ code: 'AZ', label: 'Azerbaijan', phone: '994' },
|
||||||
|
{
|
||||||
|
code: 'BA',
|
||||||
|
label: 'Bosnia and Herzegovina',
|
||||||
|
phone: '387',
|
||||||
|
},
|
||||||
|
{ code: 'BB', label: 'Barbados', phone: '1-246' },
|
||||||
|
{ code: 'BD', label: 'Bangladesh', phone: '880' },
|
||||||
|
{ code: 'BE', label: 'Belgium', phone: '32' },
|
||||||
|
{ code: 'BF', label: 'Burkina Faso', phone: '226' },
|
||||||
|
{ code: 'BG', label: 'Bulgaria', phone: '359' },
|
||||||
|
{ code: 'BH', label: 'Bahrain', phone: '973' },
|
||||||
|
{ code: 'BI', label: 'Burundi', phone: '257' },
|
||||||
|
{ code: 'BJ', label: 'Benin', phone: '229' },
|
||||||
|
{ code: 'BL', label: 'Saint Barthelemy', phone: '590' },
|
||||||
|
{ code: 'BM', label: 'Bermuda', phone: '1-441' },
|
||||||
|
{ code: 'BN', label: 'Brunei Darussalam', phone: '673' },
|
||||||
|
{ code: 'BO', label: 'Bolivia', phone: '591' },
|
||||||
|
{ code: 'BR', label: 'Brazil', phone: '55' },
|
||||||
|
{ code: 'BS', label: 'Bahamas', phone: '1-242' },
|
||||||
|
{ code: 'BT', label: 'Bhutan', phone: '975' },
|
||||||
|
{ code: 'BV', label: 'Bouvet Island', phone: '47' },
|
||||||
|
{ code: 'BW', label: 'Botswana', phone: '267' },
|
||||||
|
{ code: 'BY', label: 'Belarus', phone: '375' },
|
||||||
|
{ code: 'BZ', label: 'Belize', phone: '501' },
|
||||||
|
{
|
||||||
|
code: 'CA',
|
||||||
|
label: 'Canada',
|
||||||
|
phone: '1',
|
||||||
|
suggested: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'CC',
|
||||||
|
label: 'Cocos (Keeling) Islands',
|
||||||
|
phone: '61',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'CD',
|
||||||
|
label: 'Congo, Democratic Republic of the',
|
||||||
|
phone: '243',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'CF',
|
||||||
|
label: 'Central African Republic',
|
||||||
|
phone: '236',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'CG',
|
||||||
|
label: 'Congo, Republic of the',
|
||||||
|
phone: '242',
|
||||||
|
},
|
||||||
|
{ code: 'CH', label: 'Switzerland', phone: '41' },
|
||||||
|
{ code: 'CI', label: "Cote d'Ivoire", phone: '225' },
|
||||||
|
{ code: 'CK', label: 'Cook Islands', phone: '682' },
|
||||||
|
{ code: 'CL', label: 'Chile', phone: '56' },
|
||||||
|
{ code: 'CM', label: 'Cameroon', phone: '237' },
|
||||||
|
{ code: 'CN', label: 'China', phone: '86' },
|
||||||
|
{ code: 'CO', label: 'Colombia', phone: '57' },
|
||||||
|
{ code: 'CR', label: 'Costa Rica', phone: '506' },
|
||||||
|
{ code: 'CU', label: 'Cuba', phone: '53' },
|
||||||
|
{ code: 'CV', label: 'Cape Verde', phone: '238' },
|
||||||
|
{ code: 'CW', label: 'Curacao', phone: '599' },
|
||||||
|
{ code: 'CX', label: 'Christmas Island', phone: '61' },
|
||||||
|
{ code: 'CY', label: 'Cyprus', phone: '357' },
|
||||||
|
{ code: 'CZ', label: 'Czech Republic', phone: '420' },
|
||||||
|
{
|
||||||
|
code: 'DE',
|
||||||
|
label: 'Germany',
|
||||||
|
phone: '49',
|
||||||
|
suggested: true,
|
||||||
|
},
|
||||||
|
{ code: 'DJ', label: 'Djibouti', phone: '253' },
|
||||||
|
{ code: 'DK', label: 'Denmark', phone: '45' },
|
||||||
|
{ code: 'DM', label: 'Dominica', phone: '1-767' },
|
||||||
|
{
|
||||||
|
code: 'DO',
|
||||||
|
label: 'Dominican Republic',
|
||||||
|
phone: '1-809',
|
||||||
|
},
|
||||||
|
{ code: 'DZ', label: 'Algeria', phone: '213' },
|
||||||
|
{ code: 'EC', label: 'Ecuador', phone: '593' },
|
||||||
|
{ code: 'EE', label: 'Estonia', phone: '372' },
|
||||||
|
{ code: 'EG', label: 'Egypt', phone: '20' },
|
||||||
|
{ code: 'EH', label: 'Western Sahara', phone: '212' },
|
||||||
|
{ code: 'ER', label: 'Eritrea', phone: '291' },
|
||||||
|
{ code: 'ES', label: 'Spain', phone: '34' },
|
||||||
|
{ code: 'ET', label: 'Ethiopia', phone: '251' },
|
||||||
|
{ code: 'FI', label: 'Finland', phone: '358' },
|
||||||
|
{ code: 'FJ', label: 'Fiji', phone: '679' },
|
||||||
|
{
|
||||||
|
code: 'FK',
|
||||||
|
label: 'Falkland Islands (Malvinas)',
|
||||||
|
phone: '500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'FM',
|
||||||
|
label: 'Micronesia, Federated States of',
|
||||||
|
phone: '691',
|
||||||
|
},
|
||||||
|
{ code: 'FO', label: 'Faroe Islands', phone: '298' },
|
||||||
|
{
|
||||||
|
code: 'FR',
|
||||||
|
label: 'France',
|
||||||
|
phone: '33',
|
||||||
|
suggested: true,
|
||||||
|
},
|
||||||
|
{ code: 'GA', label: 'Gabon', phone: '241' },
|
||||||
|
{ code: 'GB', label: 'United Kingdom', phone: '44' },
|
||||||
|
{ code: 'GD', label: 'Grenada', phone: '1-473' },
|
||||||
|
{ code: 'GE', label: 'Georgia', phone: '995' },
|
||||||
|
{ code: 'GF', label: 'French Guiana', phone: '594' },
|
||||||
|
{ code: 'GG', label: 'Guernsey', phone: '44' },
|
||||||
|
{ code: 'GH', label: 'Ghana', phone: '233' },
|
||||||
|
{ code: 'GI', label: 'Gibraltar', phone: '350' },
|
||||||
|
{ code: 'GL', label: 'Greenland', phone: '299' },
|
||||||
|
{ code: 'GM', label: 'Gambia', phone: '220' },
|
||||||
|
{ code: 'GN', label: 'Guinea', phone: '224' },
|
||||||
|
{ code: 'GP', label: 'Guadeloupe', phone: '590' },
|
||||||
|
{ code: 'GQ', label: 'Equatorial Guinea', phone: '240' },
|
||||||
|
{ code: 'GR', label: 'Greece', phone: '30' },
|
||||||
|
{
|
||||||
|
code: 'GS',
|
||||||
|
label: 'South Georgia and the South Sandwich Islands',
|
||||||
|
phone: '500',
|
||||||
|
},
|
||||||
|
{ code: 'GT', label: 'Guatemala', phone: '502' },
|
||||||
|
{ code: 'GU', label: 'Guam', phone: '1-671' },
|
||||||
|
{ code: 'GW', label: 'Guinea-Bissau', phone: '245' },
|
||||||
|
{ code: 'GY', label: 'Guyana', phone: '592' },
|
||||||
|
{ code: 'HK', label: 'Hong Kong', phone: '852' },
|
||||||
|
{
|
||||||
|
code: 'HM',
|
||||||
|
label: 'Heard Island and McDonald Islands',
|
||||||
|
phone: '672',
|
||||||
|
},
|
||||||
|
{ code: 'HN', label: 'Honduras', phone: '504' },
|
||||||
|
{ code: 'HR', label: 'Croatia', phone: '385' },
|
||||||
|
{ code: 'HT', label: 'Haiti', phone: '509' },
|
||||||
|
{ code: 'HU', label: 'Hungary', phone: '36' },
|
||||||
|
{ code: 'ID', label: 'Indonesia', phone: '62' },
|
||||||
|
{ code: 'IE', label: 'Ireland', phone: '353' },
|
||||||
|
{ code: 'IL', label: 'Israel', phone: '972' },
|
||||||
|
{ code: 'IM', label: 'Isle of Man', phone: '44' },
|
||||||
|
{ code: 'IN', label: 'India', phone: '91' },
|
||||||
|
{
|
||||||
|
code: 'IO',
|
||||||
|
label: 'British Indian Ocean Territory',
|
||||||
|
phone: '246',
|
||||||
|
},
|
||||||
|
{ code: 'IQ', label: 'Iraq', phone: '964' },
|
||||||
|
{
|
||||||
|
code: 'IR',
|
||||||
|
label: 'Iran, Islamic Republic of',
|
||||||
|
phone: '98',
|
||||||
|
},
|
||||||
|
{ code: 'IS', label: 'Iceland', phone: '354' },
|
||||||
|
{ code: 'IT', label: 'Italy', phone: '39' },
|
||||||
|
{ code: 'JE', label: 'Jersey', phone: '44' },
|
||||||
|
{ code: 'JM', label: 'Jamaica', phone: '1-876' },
|
||||||
|
{ code: 'JO', label: 'Jordan', phone: '962' },
|
||||||
|
{
|
||||||
|
code: 'JP',
|
||||||
|
label: 'Japan',
|
||||||
|
phone: '81',
|
||||||
|
suggested: true,
|
||||||
|
},
|
||||||
|
{ code: 'KE', label: 'Kenya', phone: '254' },
|
||||||
|
{ code: 'KG', label: 'Kyrgyzstan', phone: '996' },
|
||||||
|
{ code: 'KH', label: 'Cambodia', phone: '855' },
|
||||||
|
{ code: 'KI', label: 'Kiribati', phone: '686' },
|
||||||
|
{ code: 'KM', label: 'Comoros', phone: '269' },
|
||||||
|
{
|
||||||
|
code: 'KN',
|
||||||
|
label: 'Saint Kitts and Nevis',
|
||||||
|
phone: '1-869',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'KP',
|
||||||
|
label: "Korea, Democratic People's Republic of",
|
||||||
|
phone: '850',
|
||||||
|
},
|
||||||
|
{ code: 'KR', label: 'Korea, Republic of', phone: '82' },
|
||||||
|
{ code: 'KW', label: 'Kuwait', phone: '965' },
|
||||||
|
{ code: 'KY', label: 'Cayman Islands', phone: '1-345' },
|
||||||
|
{ code: 'KZ', label: 'Kazakhstan', phone: '7' },
|
||||||
|
{
|
||||||
|
code: 'LA',
|
||||||
|
label: "Lao People's Democratic Republic",
|
||||||
|
phone: '856',
|
||||||
|
},
|
||||||
|
{ code: 'LB', label: 'Lebanon', phone: '961' },
|
||||||
|
{ code: 'LC', label: 'Saint Lucia', phone: '1-758' },
|
||||||
|
{ code: 'LI', label: 'Liechtenstein', phone: '423' },
|
||||||
|
{ code: 'LK', label: 'Sri Lanka', phone: '94' },
|
||||||
|
{ code: 'LR', label: 'Liberia', phone: '231' },
|
||||||
|
{ code: 'LS', label: 'Lesotho', phone: '266' },
|
||||||
|
{ code: 'LT', label: 'Lithuania', phone: '370' },
|
||||||
|
{ code: 'LU', label: 'Luxembourg', phone: '352' },
|
||||||
|
{ code: 'LV', label: 'Latvia', phone: '371' },
|
||||||
|
{ code: 'LY', label: 'Libya', phone: '218' },
|
||||||
|
{ code: 'MA', label: 'Morocco', phone: '212' },
|
||||||
|
{ code: 'MC', label: 'Monaco', phone: '377' },
|
||||||
|
{
|
||||||
|
code: 'MD',
|
||||||
|
label: 'Moldova, Republic of',
|
||||||
|
phone: '373',
|
||||||
|
},
|
||||||
|
{ code: 'ME', label: 'Montenegro', phone: '382' },
|
||||||
|
{
|
||||||
|
code: 'MF',
|
||||||
|
label: 'Saint Martin (French part)',
|
||||||
|
phone: '590',
|
||||||
|
},
|
||||||
|
{ code: 'MG', label: 'Madagascar', phone: '261' },
|
||||||
|
{ code: 'MH', label: 'Marshall Islands', phone: '692' },
|
||||||
|
{
|
||||||
|
code: 'MK',
|
||||||
|
label: 'Macedonia, the Former Yugoslav Republic of',
|
||||||
|
phone: '389',
|
||||||
|
},
|
||||||
|
{ code: 'ML', label: 'Mali', phone: '223' },
|
||||||
|
{ code: 'MM', label: 'Myanmar', phone: '95' },
|
||||||
|
{ code: 'MN', label: 'Mongolia', phone: '976' },
|
||||||
|
{ code: 'MO', label: 'Macao', phone: '853' },
|
||||||
|
{
|
||||||
|
code: 'MP',
|
||||||
|
label: 'Northern Mariana Islands',
|
||||||
|
phone: '1-670',
|
||||||
|
},
|
||||||
|
{ code: 'MQ', label: 'Martinique', phone: '596' },
|
||||||
|
{ code: 'MR', label: 'Mauritania', phone: '222' },
|
||||||
|
{ code: 'MS', label: 'Montserrat', phone: '1-664' },
|
||||||
|
{ code: 'MT', label: 'Malta', phone: '356' },
|
||||||
|
{ code: 'MU', label: 'Mauritius', phone: '230' },
|
||||||
|
{ code: 'MV', label: 'Maldives', phone: '960' },
|
||||||
|
{ code: 'MW', label: 'Malawi', phone: '265' },
|
||||||
|
{ code: 'MX', label: 'Mexico', phone: '52' },
|
||||||
|
{ code: 'MY', label: 'Malaysia', phone: '60' },
|
||||||
|
{ code: 'MZ', label: 'Mozambique', phone: '258' },
|
||||||
|
{ code: 'NA', label: 'Namibia', phone: '264' },
|
||||||
|
{ code: 'NC', label: 'New Caledonia', phone: '687' },
|
||||||
|
{ code: 'NE', label: 'Niger', phone: '227' },
|
||||||
|
{ code: 'NF', label: 'Norfolk Island', phone: '672' },
|
||||||
|
{ code: 'NG', label: 'Nigeria', phone: '234' },
|
||||||
|
{ code: 'NI', label: 'Nicaragua', phone: '505' },
|
||||||
|
{ code: 'NL', label: 'Netherlands', phone: '31' },
|
||||||
|
{ code: 'NO', label: 'Norway', phone: '47' },
|
||||||
|
{ code: 'NP', label: 'Nepal', phone: '977' },
|
||||||
|
{ code: 'NR', label: 'Nauru', phone: '674' },
|
||||||
|
{ code: 'NU', label: 'Niue', phone: '683' },
|
||||||
|
{ code: 'NZ', label: 'New Zealand', phone: '64' },
|
||||||
|
{ code: 'OM', label: 'Oman', phone: '968' },
|
||||||
|
{ code: 'PA', label: 'Panama', phone: '507' },
|
||||||
|
{ code: 'PE', label: 'Peru', phone: '51' },
|
||||||
|
{ code: 'PF', label: 'French Polynesia', phone: '689' },
|
||||||
|
{ code: 'PG', label: 'Papua New Guinea', phone: '675' },
|
||||||
|
{ code: 'PH', label: 'Philippines', phone: '63' },
|
||||||
|
{ code: 'PK', label: 'Pakistan', phone: '92' },
|
||||||
|
{ code: 'PL', label: 'Poland', phone: '48' },
|
||||||
|
{
|
||||||
|
code: 'PM',
|
||||||
|
label: 'Saint Pierre and Miquelon',
|
||||||
|
phone: '508',
|
||||||
|
},
|
||||||
|
{ code: 'PN', label: 'Pitcairn', phone: '870' },
|
||||||
|
{ code: 'PR', label: 'Puerto Rico', phone: '1' },
|
||||||
|
{
|
||||||
|
code: 'PS',
|
||||||
|
label: 'Palestine, State of',
|
||||||
|
phone: '970',
|
||||||
|
},
|
||||||
|
{ code: 'PT', label: 'Portugal', phone: '351' },
|
||||||
|
{ code: 'PW', label: 'Palau', phone: '680' },
|
||||||
|
{ code: 'PY', label: 'Paraguay', phone: '595' },
|
||||||
|
{ code: 'QA', label: 'Qatar', phone: '974' },
|
||||||
|
{ code: 'RE', label: 'Reunion', phone: '262' },
|
||||||
|
{ code: 'RO', label: 'Romania', phone: '40' },
|
||||||
|
{ code: 'RS', label: 'Serbia', phone: '381' },
|
||||||
|
{ code: 'RU', label: 'Russian Federation', phone: '7' },
|
||||||
|
{ code: 'RW', label: 'Rwanda', phone: '250' },
|
||||||
|
{ code: 'SA', label: 'Saudi Arabia', phone: '966' },
|
||||||
|
{ code: 'SB', label: 'Solomon Islands', phone: '677' },
|
||||||
|
{ code: 'SC', label: 'Seychelles', phone: '248' },
|
||||||
|
{ code: 'SD', label: 'Sudan', phone: '249' },
|
||||||
|
{ code: 'SE', label: 'Sweden', phone: '46' },
|
||||||
|
{ code: 'SG', label: 'Singapore', phone: '65' },
|
||||||
|
{ code: 'SH', label: 'Saint Helena', phone: '290' },
|
||||||
|
{ code: 'SI', label: 'Slovenia', phone: '386' },
|
||||||
|
{
|
||||||
|
code: 'SJ',
|
||||||
|
label: 'Svalbard and Jan Mayen',
|
||||||
|
phone: '47',
|
||||||
|
},
|
||||||
|
{ code: 'SK', label: 'Slovakia', phone: '421' },
|
||||||
|
{ code: 'SL', label: 'Sierra Leone', phone: '232' },
|
||||||
|
{ code: 'SM', label: 'San Marino', phone: '378' },
|
||||||
|
{ code: 'SN', label: 'Senegal', phone: '221' },
|
||||||
|
{ code: 'SO', label: 'Somalia', phone: '252' },
|
||||||
|
{ code: 'SR', label: 'Suriname', phone: '597' },
|
||||||
|
{ code: 'SS', label: 'South Sudan', phone: '211' },
|
||||||
|
{
|
||||||
|
code: 'ST',
|
||||||
|
label: 'Sao Tome and Principe',
|
||||||
|
phone: '239',
|
||||||
|
},
|
||||||
|
{ code: 'SV', label: 'El Salvador', phone: '503' },
|
||||||
|
{
|
||||||
|
code: 'SX',
|
||||||
|
label: 'Sint Maarten (Dutch part)',
|
||||||
|
phone: '1-721',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'SY',
|
||||||
|
label: 'Syrian Arab Republic',
|
||||||
|
phone: '963',
|
||||||
|
},
|
||||||
|
{ code: 'SZ', label: 'Swaziland', phone: '268' },
|
||||||
|
{
|
||||||
|
code: 'TC',
|
||||||
|
label: 'Turks and Caicos Islands',
|
||||||
|
phone: '1-649',
|
||||||
|
},
|
||||||
|
{ code: 'TD', label: 'Chad', phone: '235' },
|
||||||
|
{
|
||||||
|
code: 'TF',
|
||||||
|
label: 'French Southern Territories',
|
||||||
|
phone: '262',
|
||||||
|
},
|
||||||
|
{ code: 'TG', label: 'Togo', phone: '228' },
|
||||||
|
{ code: 'TH', label: 'Thailand', phone: '66' },
|
||||||
|
{ code: 'TJ', label: 'Tajikistan', phone: '992' },
|
||||||
|
{ code: 'TK', label: 'Tokelau', phone: '690' },
|
||||||
|
{ code: 'TL', label: 'Timor-Leste', phone: '670' },
|
||||||
|
{ code: 'TM', label: 'Turkmenistan', phone: '993' },
|
||||||
|
{ code: 'TN', label: 'Tunisia', phone: '216' },
|
||||||
|
{ code: 'TO', label: 'Tonga', phone: '676' },
|
||||||
|
{ code: 'TR', label: 'Turkey', phone: '90' },
|
||||||
|
{
|
||||||
|
code: 'TT',
|
||||||
|
label: 'Trinidad and Tobago',
|
||||||
|
phone: '1-868',
|
||||||
|
},
|
||||||
|
{ code: 'TV', label: 'Tuvalu', phone: '688' },
|
||||||
|
{
|
||||||
|
code: 'TW',
|
||||||
|
label: 'Taiwan, Province of China',
|
||||||
|
phone: '886',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'TZ',
|
||||||
|
label: 'United Republic of Tanzania',
|
||||||
|
phone: '255',
|
||||||
|
},
|
||||||
|
{ code: 'UA', label: 'Ukraine', phone: '380' },
|
||||||
|
{ code: 'UG', label: 'Uganda', phone: '256' },
|
||||||
|
{
|
||||||
|
code: 'US',
|
||||||
|
label: 'United States',
|
||||||
|
phone: '1',
|
||||||
|
suggested: true,
|
||||||
|
},
|
||||||
|
{ code: 'UY', label: 'Uruguay', phone: '598' },
|
||||||
|
{ code: 'UZ', label: 'Uzbekistan', phone: '998' },
|
||||||
|
{
|
||||||
|
code: 'VA',
|
||||||
|
label: 'Holy See (Vatican City State)',
|
||||||
|
phone: '379',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'VC',
|
||||||
|
label: 'Saint Vincent and the Grenadines',
|
||||||
|
phone: '1-784',
|
||||||
|
},
|
||||||
|
{ code: 'VE', label: 'Venezuela', phone: '58' },
|
||||||
|
{
|
||||||
|
code: 'VG',
|
||||||
|
label: 'British Virgin Islands',
|
||||||
|
phone: '1-284',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'VI',
|
||||||
|
label: 'US Virgin Islands',
|
||||||
|
phone: '1-340',
|
||||||
|
},
|
||||||
|
{ code: 'VN', label: 'Vietnam', phone: '84' },
|
||||||
|
{ code: 'VU', label: 'Vanuatu', phone: '678' },
|
||||||
|
{ code: 'WF', label: 'Wallis and Futuna', phone: '681' },
|
||||||
|
{ code: 'WS', label: 'Samoa', phone: '685' },
|
||||||
|
{ code: 'XK', label: 'Kosovo', phone: '383' },
|
||||||
|
{ code: 'YE', label: 'Yemen', phone: '967' },
|
||||||
|
{ code: 'YT', label: 'Mayotte', phone: '262' },
|
||||||
|
{ code: 'ZA', label: 'South Africa', phone: '27' },
|
||||||
|
{ code: 'ZM', label: 'Zambia', phone: '260' },
|
||||||
|
{ code: 'ZW', label: 'Zimbabwe', phone: '263' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default countries
|
||||||
@@ -0,0 +1,306 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import ReactGA from 'react-ga4';
|
||||||
|
import { useTheme } from '@material-ui/core/styles';
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
|
||||||
|
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
|
||||||
|
|
||||||
|
import algoliasearch from 'algoliasearch/lite';
|
||||||
|
import { InstantSearch, Configure, connectSearchBox, connectHits } from 'react-instantsearch-dom';
|
||||||
|
import {
|
||||||
|
Grid,
|
||||||
|
Paper,
|
||||||
|
TextField,
|
||||||
|
ButtonBase,
|
||||||
|
InputAdornment,
|
||||||
|
Typography,
|
||||||
|
Button,
|
||||||
|
Tooltip,
|
||||||
|
Card,
|
||||||
|
Box,
|
||||||
|
CardContent,
|
||||||
|
IconButton,
|
||||||
|
Zoom,
|
||||||
|
CardMedia,
|
||||||
|
CardActionArea,
|
||||||
|
} from '@material-ui/core';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Avatar,
|
||||||
|
AvatarGroup,
|
||||||
|
} from "@mui/material"
|
||||||
|
|
||||||
|
import {
|
||||||
|
SkipNext as SkipNextIcon,
|
||||||
|
SkipPrevious as SkipPreviousIcon,
|
||||||
|
PlayArrow as PlayArrowIcon,
|
||||||
|
VerifiedUser as VerifiedUserIcon,
|
||||||
|
} from "@material-ui/icons";
|
||||||
|
|
||||||
|
|
||||||
|
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
|
||||||
|
const CreatorGrid = props => {
|
||||||
|
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs } = props
|
||||||
|
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
|
||||||
|
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
|
||||||
|
const theme = useTheme();
|
||||||
|
//const [apps, setApps] = React.useState([]);
|
||||||
|
//const [filteredApps, setFilteredApps] = React.useState([]);
|
||||||
|
const [formMail, setFormMail] = React.useState("");
|
||||||
|
const [message, setMessage] = React.useState("");
|
||||||
|
const [formMessage, setFormMessage] = React.useState("");
|
||||||
|
|
||||||
|
const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
|
||||||
|
|
||||||
|
const isCloud =
|
||||||
|
window.location.host === "localhost:3002" ||
|
||||||
|
window.location.host === "shuffler.io";
|
||||||
|
|
||||||
|
const innerColor = "rgba(255,255,255,0.65)"
|
||||||
|
const borderRadius = 3
|
||||||
|
window.title = "Shuffle | Workflows | Discover your use-case"
|
||||||
|
|
||||||
|
const submitContact = (email, message) => {
|
||||||
|
const data = {
|
||||||
|
"firstname": "",
|
||||||
|
"lastname": "",
|
||||||
|
"title": "",
|
||||||
|
"companyname": "",
|
||||||
|
"email": email,
|
||||||
|
"phone": "",
|
||||||
|
"message": message,
|
||||||
|
}
|
||||||
|
|
||||||
|
const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
|
||||||
|
|
||||||
|
fetch(globalUrl+"/api/v1/contact", {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(response => {
|
||||||
|
if (response.success === true) {
|
||||||
|
setFormMessage(response.reason)
|
||||||
|
//alert.info("Thanks for submitting!")
|
||||||
|
} else {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
}
|
||||||
|
|
||||||
|
setFormMail("")
|
||||||
|
setMessage("")
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
console.log(error)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// value={currentRefinement}
|
||||||
|
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
||||||
|
useEffect(() => {
|
||||||
|
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
|
||||||
|
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||||
|
const params = Object.fromEntries(urlSearchParams.entries())
|
||||||
|
const foundQuery = params["q"]
|
||||||
|
if (foundQuery !== null && foundQuery !== undefined) {
|
||||||
|
refine(foundQuery)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form noValidate action="" role="search">
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1em",
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon style={{marginLeft: 5}}/>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
autoComplete='off'
|
||||||
|
type="search"
|
||||||
|
color="primary"
|
||||||
|
value={currentRefinement}
|
||||||
|
placeholder="Find Creators..."
|
||||||
|
id="shuffle_search_field"
|
||||||
|
onChange={(event) => {
|
||||||
|
refine(event.currentTarget.value)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/*isSearchStalled ? 'My search is stalled' : ''*/}
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const paperAppContainer = {
|
||||||
|
display: "flex",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
alignContent: "space-between",
|
||||||
|
marginTop: 5,
|
||||||
|
}
|
||||||
|
|
||||||
|
const Hits = ({ hits }) => {
|
||||||
|
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
|
||||||
|
var counted = 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container spacing={4} style={paperAppContainer}>
|
||||||
|
{hits.map((data, index) => {
|
||||||
|
if (counted === 12/xs*rowHandler) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
counted += 1
|
||||||
|
const creatorUrl = !isCloud ? `https://shuffler.io/creators/${data.username}` : `/creators/${data.username}`
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Zoom key={index} in={true} style={{}}>
|
||||||
|
<Grid item xs={xs} style={{ padding: "12px 10px 12px 10px", }}>
|
||||||
|
<Card style={{border: "1px solid rgba(255,255,255,0.3)", minHeight: 177, maxHeight: 177,}}>
|
||||||
|
<a href={creatorUrl} rel="noopener noreferrer" target={isCloud ? "" : "_blank"} style={{textDecoration: "none", color: "inherit",}}>
|
||||||
|
<CardActionArea style={{padding: "5px 10px 5px 10px", minHeight: 177, maxHeight: 177,}}>
|
||||||
|
<CardContent sx={{ flex: '1 0 auto', minWidth: 160, maxWidth: 160, overflow: "hidden", padding: 0, }}>
|
||||||
|
<div style={{display: "flex"}}>
|
||||||
|
<img style={{height: 74, width: 74, borderRadius: 100, }} alt={"Creator profile of "+data.username} src={data.image} />
|
||||||
|
<Typography component="div" variant="body1" style={{marginTop: 20, marginLeft: 15, }}>
|
||||||
|
@{data.username}
|
||||||
|
</Typography>
|
||||||
|
<span style={{marginTop: "auto", marginBottom: "auto", marginLeft: 10, }}>
|
||||||
|
{data.verified === true ?
|
||||||
|
<Tooltip title="Verified and earning from Shuffle contributions" placement="top">
|
||||||
|
<VerifiedUserIcon style={{}}/>
|
||||||
|
</Tooltip>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Typography variant="body1" color="textSecondary" style={{marginTop: 10, }}>
|
||||||
|
<b>{data.apps === undefined || data.apps === null ? 0 : data.apps}</b> apps <span style={{marginLeft: 15, }}/><b>{data.workflows === null || data.workflows === undefined ? 0 : data.workflows}</b> workflows
|
||||||
|
</Typography>
|
||||||
|
{data.specialized_apps !== undefined && data.specialized_apps !== null && data.specialized_apps.length > 0 ?
|
||||||
|
<AvatarGroup max={10} style={{flexDirection: "row", padding: 0, margin: 0, itemAlign: "left", textAlign: "left", marginTop: 3,}}>
|
||||||
|
{data.specialized_apps.map((app, index) => {
|
||||||
|
// Putting all this in secondary of ListItemText looked weird.
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
style={{
|
||||||
|
height: 24,
|
||||||
|
width: 24,
|
||||||
|
filter: "brightness(0.6)",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
console.log("Click")
|
||||||
|
//navigate("/apps/"+app.id)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tooltip color="primary" title={app.name} placement="bottom">
|
||||||
|
<Avatar alt={app.name} src={app.image} style={{width: 24, height: 24}}/>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</AvatarGroup>
|
||||||
|
:
|
||||||
|
null}
|
||||||
|
</CardContent>
|
||||||
|
</CardActionArea>
|
||||||
|
</a>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
</Zoom>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const CustomSearchBox = connectSearchBox(SearchBox)
|
||||||
|
const CustomHits = connectHits(Hits)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{width: "100%", position: "relative", height: "100%",}}>
|
||||||
|
<InstantSearch searchClient={searchClient} indexName="creators">
|
||||||
|
<Configure clickAnalytics />
|
||||||
|
<div style={{maxWidth: 450, margin: "auto", marginTop: 15, marginBottom: 15, }}>
|
||||||
|
<CustomSearchBox />
|
||||||
|
</div>
|
||||||
|
<CustomHits hitsPerPage={100}/>
|
||||||
|
</InstantSearch>
|
||||||
|
{showSuggestion === true ?
|
||||||
|
<div style={{maxWidth: isMobile ? "100%" : "60%", margin: "auto", paddingTop: 50, textAlign: "center",}}>
|
||||||
|
<Typography variant="h6" style={{color: "white", marginTop: 50,}}>
|
||||||
|
Can't find what you're looking for?
|
||||||
|
</Typography>
|
||||||
|
<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
|
||||||
|
<TextField
|
||||||
|
required
|
||||||
|
style={{flex: "1", marginRight: "15px", backgroundColor: theme.palette.inputColor}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
fullWidth={true}
|
||||||
|
placeholder="Email (optional)"
|
||||||
|
type="email"
|
||||||
|
id="email-handler"
|
||||||
|
autoComplete="email"
|
||||||
|
margin="normal"
|
||||||
|
variant="outlined"
|
||||||
|
onChange={e => setFormMail(e.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
required
|
||||||
|
style={{flex: "1", backgroundColor: theme.palette.inputColor}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
fullWidth={true}
|
||||||
|
placeholder="What are we missing?"
|
||||||
|
type=""
|
||||||
|
id="standard-required"
|
||||||
|
margin="normal"
|
||||||
|
variant="outlined"
|
||||||
|
autoComplete="off"
|
||||||
|
onChange={e => setMessage(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
style={buttonStyle}
|
||||||
|
disabled={message.length === 0}
|
||||||
|
onClick={() => {
|
||||||
|
submitContact(formMail, message)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
<Typography style={{color: "white"}} variant="body2">{formMessage}</Typography>
|
||||||
|
</div>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CreatorGrid;
|
||||||
@@ -0,0 +1,356 @@
|
|||||||
|
import React, {useEffect, useState} from 'react';
|
||||||
|
|
||||||
|
import ReactGA from 'react-ga4';
|
||||||
|
import { useTheme } from '@material-ui/core/styles';
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
|
||||||
|
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
|
||||||
|
import aa from 'search-insights'
|
||||||
|
|
||||||
|
import algoliasearch from 'algoliasearch/lite';
|
||||||
|
import { InstantSearch, Configure, connectSearchBox, connectHits } from 'react-instantsearch-dom';
|
||||||
|
import {
|
||||||
|
Zoom,
|
||||||
|
Grid,
|
||||||
|
Paper,
|
||||||
|
TextField,
|
||||||
|
Avatar,
|
||||||
|
ButtonBase,
|
||||||
|
InputAdornment,
|
||||||
|
Typography,
|
||||||
|
Button,
|
||||||
|
Tooltip,
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListItemAvatar,
|
||||||
|
ListItemText,
|
||||||
|
} from '@material-ui/core';
|
||||||
|
|
||||||
|
import {Close as CloseIcon, Folder as FolderIcon, Polymer as PolymerIcon, LibraryBooks as LibraryBooksIcon} from '@material-ui/icons'
|
||||||
|
|
||||||
|
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
|
||||||
|
const DocsGrid = props => {
|
||||||
|
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, userdata, } = props
|
||||||
|
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
|
||||||
|
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 2 : parsedXs
|
||||||
|
const theme = useTheme();
|
||||||
|
//const [apps, setApps] = React.useState([]);
|
||||||
|
//const [filteredApps, setFilteredApps] = React.useState([]);
|
||||||
|
const [formMail, setFormMail] = React.useState("");
|
||||||
|
const [message, setMessage] = React.useState("");
|
||||||
|
const [formMessage, setFormMessage] = React.useState("");
|
||||||
|
|
||||||
|
const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
|
||||||
|
|
||||||
|
const innerColor = "rgba(255,255,255,0.65)"
|
||||||
|
const borderRadius = 3
|
||||||
|
window.title = "Shuffle | Apps | Find and integrate any app"
|
||||||
|
|
||||||
|
const submitContact = (email, message) => {
|
||||||
|
const data = {
|
||||||
|
"firstname": "",
|
||||||
|
"lastname": "",
|
||||||
|
"title": "",
|
||||||
|
"companyname": "",
|
||||||
|
"email": email,
|
||||||
|
"phone": "",
|
||||||
|
"message": message,
|
||||||
|
}
|
||||||
|
|
||||||
|
const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
|
||||||
|
|
||||||
|
fetch(globalUrl+"/api/v1/contact", {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(response => {
|
||||||
|
if (response.success === true) {
|
||||||
|
setFormMessage(response.reason)
|
||||||
|
//alert.info("Thanks for submitting!")
|
||||||
|
} else {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
}
|
||||||
|
|
||||||
|
setFormMail("")
|
||||||
|
setMessage("")
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
console.log(error)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
||||||
|
useEffect(() => {
|
||||||
|
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
|
||||||
|
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||||
|
const params = Object.fromEntries(urlSearchParams.entries())
|
||||||
|
const foundQuery = params["q"]
|
||||||
|
if (foundQuery !== null && foundQuery !== undefined) {
|
||||||
|
console.log("Got query: ", foundQuery)
|
||||||
|
refine(foundQuery)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form noValidate action="" role="search">
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1em",
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon style={{marginLeft: 5}}/>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
autoComplete='off'
|
||||||
|
type="search"
|
||||||
|
color="primary"
|
||||||
|
defaultValue={currentRefinement}
|
||||||
|
placeholder="Search our Documentation..."
|
||||||
|
id="shuffle_search_field"
|
||||||
|
onChange={(event) => {
|
||||||
|
refine(event.currentTarget.value)
|
||||||
|
}}
|
||||||
|
limit={5}
|
||||||
|
/>
|
||||||
|
{/*isSearchStalled ? 'My search is stalled' : ''*/}
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
var workflowDelay = -50
|
||||||
|
const Hits = ({ hits }) => {
|
||||||
|
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
|
||||||
|
//console.log(hits)
|
||||||
|
//var curhits = hits
|
||||||
|
//if (hits.length > 0 && defaultApps.length === 0) {
|
||||||
|
// setDefaultApps(hits)
|
||||||
|
//}
|
||||||
|
|
||||||
|
//const [defaultApps, setDefaultApps] = React.useState([])
|
||||||
|
//console.log(hits)
|
||||||
|
//if (hits.length > 0 && hits.length !== innerHits.length) {
|
||||||
|
// setInnerHits(hits)
|
||||||
|
//}
|
||||||
|
|
||||||
|
var counted = 0
|
||||||
|
return (
|
||||||
|
<List>
|
||||||
|
{hits.map((data, index) => {
|
||||||
|
workflowDelay += 50
|
||||||
|
|
||||||
|
const innerlistitemStyle = {
|
||||||
|
width: "100%",
|
||||||
|
overflowX: "hidden",
|
||||||
|
overflowY: "hidden",
|
||||||
|
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||||
|
backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
|
||||||
|
cursor: "pointer",
|
||||||
|
marginLeft: 5,
|
||||||
|
marginRight: 5,
|
||||||
|
maxHeight: 75,
|
||||||
|
minHeight: 75,
|
||||||
|
maxWidth: 420,
|
||||||
|
minWidth: "100%",
|
||||||
|
}
|
||||||
|
|
||||||
|
if (counted >= 12/xs*rowHandler) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
counted += 1
|
||||||
|
|
||||||
|
var name = data.name === undefined ?
|
||||||
|
data.filename.charAt(0).toUpperCase() + data.filename.slice(1).replaceAll("_", " ") + " - " + data.title :
|
||||||
|
(data.name.charAt(0).toUpperCase()+data.name.slice(1)).replaceAll("_", " ")
|
||||||
|
|
||||||
|
if (name.length > 96) {
|
||||||
|
name = name.slice(0, 96)+"..."
|
||||||
|
}
|
||||||
|
|
||||||
|
//const secondaryText = data.data !== undefined ? data.data.slice(0, 100)+"..." : ""
|
||||||
|
const secondaryText = data.data !== undefined ? data.data.slice(0, 100)+"..." : ""
|
||||||
|
const baseImage = <PolymerIcon />
|
||||||
|
const avatar = data.image_url === undefined ?
|
||||||
|
baseImage
|
||||||
|
:
|
||||||
|
<Avatar
|
||||||
|
src={data.image_url}
|
||||||
|
variant="rounded"
|
||||||
|
/>
|
||||||
|
|
||||||
|
var parsedUrl = data.urlpath !== undefined ? data.urlpath : ""
|
||||||
|
parsedUrl += `?queryID=${data.__queryID}`
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
|
||||||
|
<Link key={data.objectID} to={parsedUrl} style={{textDecoration: "none", color: "white",}} onClick={(event) => {
|
||||||
|
aa('init', {
|
||||||
|
appId: searchClient.appId,
|
||||||
|
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||||
|
})
|
||||||
|
|
||||||
|
const timestamp = new Date().getTime()
|
||||||
|
aa('sendEvents', [
|
||||||
|
{
|
||||||
|
eventType: 'click',
|
||||||
|
eventName: 'Product Clicked Appgrid',
|
||||||
|
index: 'documentation',
|
||||||
|
objectIDs: [data.objectID],
|
||||||
|
timestamp: timestamp,
|
||||||
|
queryID: data.__queryID,
|
||||||
|
positions: [data.__position],
|
||||||
|
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
console.log("CLICK")
|
||||||
|
}}>
|
||||||
|
<ListItem key={data.objectID} style={innerlistitemStyle} onMouseOver={() => {
|
||||||
|
setMouseHoverIndex(index)
|
||||||
|
}}>
|
||||||
|
<ListItemAvatar>
|
||||||
|
{avatar}
|
||||||
|
</ListItemAvatar>
|
||||||
|
<ListItemText
|
||||||
|
primary={name}
|
||||||
|
secondary={secondaryText}
|
||||||
|
/>
|
||||||
|
{/*
|
||||||
|
<ListItemSecondaryAction>
|
||||||
|
<IconButton edge="end" aria-label="delete">
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</ListItemSecondaryAction>
|
||||||
|
*/}
|
||||||
|
</ListItem>
|
||||||
|
</Link>
|
||||||
|
</Zoom>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</List>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const CustomSearchBox = connectSearchBox(SearchBox)
|
||||||
|
const CustomHits = connectHits(Hits)
|
||||||
|
const selectButtonStyle = {
|
||||||
|
minWidth: 150,
|
||||||
|
maxWidth: 150,
|
||||||
|
minHeight: 50,
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{width: "100%", textAlign: "center", position: "relative", height: "100%", display: "flex"}}>
|
||||||
|
{/*
|
||||||
|
<div style={{padding: 10, }}>
|
||||||
|
<Button
|
||||||
|
style={selectButtonStyle}
|
||||||
|
variant="outlined"
|
||||||
|
onClick={() => {
|
||||||
|
const searchField = document.createElement("shuffle_search_field")
|
||||||
|
console.log("Field: ", searchField)
|
||||||
|
if (searchField !== null & searchField !== undefined) {
|
||||||
|
console.log("Set field.")
|
||||||
|
searchField.value = "WHAT WABALABA"
|
||||||
|
searchField.setAttribute("value", "WHAT WABALABA")
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cases
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
*/}
|
||||||
|
<div style={{width: "100%", position: "relative", height: "100%",}}>
|
||||||
|
<InstantSearch searchClient={searchClient} indexName="documentation">
|
||||||
|
<div style={{maxWidth: 450, margin: "auto", marginTop: 15, marginBottom: 15, }}>
|
||||||
|
<CustomSearchBox />
|
||||||
|
</div>
|
||||||
|
<Configure clickAnalytics />
|
||||||
|
<CustomHits hitsPerPage={5}/>
|
||||||
|
</InstantSearch>
|
||||||
|
{showSuggestion === true ?
|
||||||
|
<div style={{paddingTop: 0, maxWidth: isMobile ? "100%" : "60%", margin: "auto"}}>
|
||||||
|
<Typography variant="h6" style={{color: "white", marginTop: 50,}}>
|
||||||
|
Can't find what you're looking for?
|
||||||
|
</Typography>
|
||||||
|
<div style={{flex: "1", display: "flex", flexDirection: "row", textAlign: "center",}}>
|
||||||
|
<TextField
|
||||||
|
required
|
||||||
|
style={{flex: "1", marginRight: "15px", backgroundColor: theme.palette.inputColor}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
fullWidth={true}
|
||||||
|
placeholder="Email (optional)"
|
||||||
|
type="email"
|
||||||
|
id="email-handler"
|
||||||
|
autoComplete="email"
|
||||||
|
margin="normal"
|
||||||
|
variant="outlined"
|
||||||
|
onChange={e => setFormMail(e.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
required
|
||||||
|
style={{flex: "1", backgroundColor: theme.palette.inputColor}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
fullWidth={true}
|
||||||
|
placeholder="What are we missing?"
|
||||||
|
type=""
|
||||||
|
id="standard-required"
|
||||||
|
margin="normal"
|
||||||
|
variant="outlined"
|
||||||
|
autoComplete="off"
|
||||||
|
onChange={e => setMessage(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
style={buttonStyle}
|
||||||
|
disabled={message.length === 0}
|
||||||
|
onClick={() => {
|
||||||
|
submitContact(formMail, message)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
<Typography style={{color: "white"}} variant="body2">{formMessage}</Typography>
|
||||||
|
</div>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
|
||||||
|
<span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: 120, }}>
|
||||||
|
<Typography variant="body2" color="textSecondary" style={{}}>
|
||||||
|
Search by
|
||||||
|
</Typography>
|
||||||
|
<a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
|
||||||
|
<img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{height: 17, marginLeft: 5, marginTop: 3,}} />
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DocsGrid;
|
||||||
@@ -0,0 +1,516 @@
|
|||||||
|
import React, { useEffect, useContext } from "react";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
import { isMobile } from "react-device-detect"
|
||||||
|
import ChipInput from "material-ui-chip-input";
|
||||||
|
import UsecaseSearch from "../components/UsecaseSearch.jsx"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Avatar,
|
||||||
|
Grid,
|
||||||
|
InputLabel,
|
||||||
|
Select,
|
||||||
|
ListSubheader,
|
||||||
|
Paper,
|
||||||
|
Tooltip,
|
||||||
|
Divider,
|
||||||
|
Button,
|
||||||
|
TextField,
|
||||||
|
IconButton,
|
||||||
|
Menu,
|
||||||
|
MenuItem,
|
||||||
|
FormControlLabel,
|
||||||
|
Chip,
|
||||||
|
Switch,
|
||||||
|
Typography,
|
||||||
|
Zoom,
|
||||||
|
CircularProgress,
|
||||||
|
Dialog,
|
||||||
|
DialogTitle,
|
||||||
|
DialogActions,
|
||||||
|
DialogContent,
|
||||||
|
OutlinedInput,
|
||||||
|
Checkbox,
|
||||||
|
ListItemText,
|
||||||
|
Radio,
|
||||||
|
RadioGroup,
|
||||||
|
FormControl,
|
||||||
|
FormLabel,
|
||||||
|
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
ExpandLess as ExpandLessIcon,
|
||||||
|
ExpandMore as ExpandMoreIcon,
|
||||||
|
Publish as PublishIcon,
|
||||||
|
OpenInNew as OpenInNewIcon,
|
||||||
|
} from "@material-ui/icons";
|
||||||
|
|
||||||
|
const EditWorkflow = (props) => {
|
||||||
|
const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, } = props
|
||||||
|
|
||||||
|
const [submitLoading, setSubmitLoading] = React.useState(false);
|
||||||
|
const [showMoreClicked, setShowMoreClicked] = React.useState(false);
|
||||||
|
const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)
|
||||||
|
const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
|
||||||
|
const [newWorkflowTags, setNewWorkflowTags] = React.useState(workflow.tags !== undefined && workflow.tags !== null ? JSON.parse(JSON.stringify(workflow.tags)) : [])
|
||||||
|
const [selectedUsecases, setSelectedUsecases] = React.useState(workflow.usecase_ids !== undefined && workflow.usecase_ids !== null ? JSON.parse(JSON.stringify(workflow.usecase_ids)) : []);
|
||||||
|
const [foundWorkflowId, setFoundWorkflowId] = React.useState("")
|
||||||
|
const [name, setName] = React.useState(workflow.name !== undefined ? workflow.name : "")
|
||||||
|
const [description, setDescription] = React.useState(workflow.description !== undefined ? workflow.description : "")
|
||||||
|
|
||||||
|
|
||||||
|
// Gets the generated workflow
|
||||||
|
const getGeneratedWorkflow = (workflow_id) => {
|
||||||
|
fetch(globalUrl + "/api/v1/workflows/" + workflow_id, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 when getting workflow");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson.id === workflow_id) {
|
||||||
|
console.log("GOT WORKFLOW: ", responseJson)
|
||||||
|
if (name === "") {
|
||||||
|
innerWorkflow.name = responseJson.name
|
||||||
|
setName(responseJson.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (description === "") {
|
||||||
|
innerWorkflow.description = responseJson.description
|
||||||
|
setDescription(description)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newWorkflowTags === []) {
|
||||||
|
innerWorkflow.tags = responseJson.tags
|
||||||
|
setNewWorkflowTags(responseJson.tags)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedUsecases === []) {
|
||||||
|
selectedUsecases = responseJson.usecase_ids
|
||||||
|
}
|
||||||
|
|
||||||
|
innerWorkflow.id = responseJson.id
|
||||||
|
innerWorkflow.blogpost = responseJson.blogpost
|
||||||
|
innerWorkflow.actions = responseJson.actions
|
||||||
|
innerWorkflow.triggers = responseJson.triggers
|
||||||
|
innerWorkflow.branches = responseJson.branches
|
||||||
|
innerWorkflow.comments = responseJson.comments
|
||||||
|
innerWorkflow.workflow_variables = responseJson.workflow_variables
|
||||||
|
innerWorkflow.execution_variables = responseJson.execution_variables
|
||||||
|
|
||||||
|
|
||||||
|
setInnerWorkflow(innerWorkflow)
|
||||||
|
setUpdate(Math.random())
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
//alert.error(error.toString());
|
||||||
|
console.log("Get workflow error: ", error.toString());
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (foundWorkflowId.length > 0) {
|
||||||
|
getGeneratedWorkflow(foundWorkflowId)
|
||||||
|
|
||||||
|
setFoundWorkflowId("")
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
|
||||||
|
if (modalOpen !== true) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const newWorkflow = isEditing === true ? false : true
|
||||||
|
|
||||||
|
var upload = "";
|
||||||
|
var total_count = 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
open={modalOpen}
|
||||||
|
onClose={() => {
|
||||||
|
setModalOpen(false);
|
||||||
|
}}
|
||||||
|
PaperProps={{
|
||||||
|
style: {
|
||||||
|
backgroundColor: theme.palette.surfaceColor,
|
||||||
|
color: "white",
|
||||||
|
minWidth: isMobile ? "90%" : 550,
|
||||||
|
maxWidth: isMobile ? "90%" : 550,
|
||||||
|
minHeight: 400,
|
||||||
|
//minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
|
||||||
|
//maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DialogTitle style={{padding: 30, paddingBottom: 0, zIndex: 1000,}}>
|
||||||
|
<div style={{display: "flex"}}>
|
||||||
|
<div style={{flex: 1, color: "rgba(255,255,255,0.9)" }}>
|
||||||
|
<div style={{display: "flex"}}>
|
||||||
|
<Typography variant="h6" style={{flex: 9, }}>
|
||||||
|
{newWorkflow ? "New" : "Editing"} workflow
|
||||||
|
</Typography>
|
||||||
|
{newWorkflow === true ? null :
|
||||||
|
<div style={{ marginLeft: 5, flex: 1 }}>
|
||||||
|
<Tooltip title="Open Workflow Form for 'normal' users">
|
||||||
|
<a
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
href={`/workflows/${workflow.id}/run`}
|
||||||
|
target="_blank"
|
||||||
|
style={{
|
||||||
|
textDecoration: "none",
|
||||||
|
color: "#f85a3e",
|
||||||
|
marginLeft: 5,
|
||||||
|
marginTop: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<OpenInNewIcon />
|
||||||
|
</a>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<Typography variant="body2" color="textSecondary" style={{maxWidth: 440,}}>
|
||||||
|
Workflows can be built from scratch, or from templates. <a href="/usecases" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Usecases</a> can help you discover next steps, and you can <a href="/search?tab=workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>search</a> for them directly. <a href="/docs/workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>
|
||||||
|
</Typography>
|
||||||
|
{showUpload === true ?
|
||||||
|
<div style={{ float: "right" }}>
|
||||||
|
<Tooltip color="primary" title={"Import manually"} placement="top">
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
style={{}}
|
||||||
|
variant="text"
|
||||||
|
onClick={() => upload.click()}
|
||||||
|
>
|
||||||
|
<PublishIcon />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
: null}
|
||||||
|
</div>
|
||||||
|
{/*newWorkflow === true ?
|
||||||
|
<div style={{flex: 1, marginLeft: 45, }}>
|
||||||
|
<Typography variant="h6">
|
||||||
|
Use a Template
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2" color="textSecondary" style={{maxWidth: 440,}}>
|
||||||
|
Start your workflow from our templating system. This uses publied workflows from our <a href="/creators" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}}>Creators</a> to generate full Usecases or parts of your Workflow.
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
: null*/}
|
||||||
|
</div>
|
||||||
|
</DialogTitle>
|
||||||
|
<FormControl>
|
||||||
|
<DialogContent style={{paddingTop: 10, display: "flex", minHeight: 350, zIndex: 1001, }}>
|
||||||
|
<div style={{minWidth: newWorkflow ? 450 : 500, maxWidth: newWorkflow ? 450 : 500, }}>
|
||||||
|
<TextField
|
||||||
|
onBlur={(event) => {
|
||||||
|
setName(event.target.value)
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
placeholder="Name"
|
||||||
|
required
|
||||||
|
margin="dense"
|
||||||
|
defaultValue={innerWorkflow.name}
|
||||||
|
label="Name"
|
||||||
|
autoFocus
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
onBlur={(event) => {
|
||||||
|
setDescription(event.target.value)
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
maxRows={4}
|
||||||
|
color="primary"
|
||||||
|
defaultValue={innerWorkflow.description}
|
||||||
|
placeholder="Description"
|
||||||
|
multiline
|
||||||
|
label="Description"
|
||||||
|
margin="dense"
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
<div style={{display: "flex", marginTop: 10, }}>
|
||||||
|
<ChipInput
|
||||||
|
style={{ flex: 1, maxHeight: 40, marginTop: 12, overflow: "auto", }}
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
placeholder="Tags"
|
||||||
|
color="primary"
|
||||||
|
fullWidth
|
||||||
|
value={newWorkflowTags}
|
||||||
|
onAdd={(chip) => {
|
||||||
|
newWorkflowTags.push(chip);
|
||||||
|
setNewWorkflowTags(newWorkflowTags);
|
||||||
|
}}
|
||||||
|
onDelete={(chip, index) => {
|
||||||
|
newWorkflowTags.splice(index, 1);
|
||||||
|
setNewWorkflowTags(newWorkflowTags);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{usecases !== null && usecases !== undefined && usecases.length > 0 ?
|
||||||
|
<FormControl style={{flex: 1, marginLeft: 5, }}>
|
||||||
|
<InputLabel htmlFor="grouped-select-usecase">Usecases</InputLabel>
|
||||||
|
<Select
|
||||||
|
defaultValue=""
|
||||||
|
id="grouped-select"
|
||||||
|
label="Matching Usecase"
|
||||||
|
multiple
|
||||||
|
value={selectedUsecases}
|
||||||
|
renderValue={(selected) => selected.join(', ')}
|
||||||
|
onChange={(event) => {
|
||||||
|
console.log("Changed: ", event)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value="">
|
||||||
|
<em>None</em>
|
||||||
|
</MenuItem>
|
||||||
|
{usecases.map((usecase, index) => {
|
||||||
|
//console.log(usecase)
|
||||||
|
return (
|
||||||
|
<span key={index}>
|
||||||
|
<ListSubheader
|
||||||
|
style={{color: usecase.color}}
|
||||||
|
>
|
||||||
|
{usecase.name}
|
||||||
|
</ListSubheader>
|
||||||
|
{usecase.list.map((subcase, subindex) => {
|
||||||
|
//console.log(subcase)
|
||||||
|
total_count += 1
|
||||||
|
return (
|
||||||
|
<MenuItem key={subindex} value={total_count} onClick={(event) => {
|
||||||
|
if (selectedUsecases.includes(subcase.name)) {
|
||||||
|
const itemIndex = selectedUsecases.indexOf(subcase.name)
|
||||||
|
if (itemIndex > -1) {
|
||||||
|
selectedUsecases.splice(itemIndex, 1)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selectedUsecases.push(subcase.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
setUpdate(Math.random());
|
||||||
|
setSelectedUsecases(selectedUsecases)
|
||||||
|
}}>
|
||||||
|
<Checkbox style={{color: selectedUsecases.includes(subcase.name) ? usecase.color : theme.palette.inputColor}} checked={selectedUsecases.includes(subcase.name)} />
|
||||||
|
<ListItemText primary={subcase.name} />
|
||||||
|
</MenuItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
: null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showMoreClicked === true ?
|
||||||
|
<span style={{marginTop: 25, }}>
|
||||||
|
|
||||||
|
<FormControl style={{marginTop: 15, }}>
|
||||||
|
<FormLabel id="demo-row-radio-buttons-group-label">Status</FormLabel>
|
||||||
|
<RadioGroup
|
||||||
|
row
|
||||||
|
aria-labelledby="demo-row-radio-buttons-group-label"
|
||||||
|
name="row-radio-buttons-group"
|
||||||
|
defaultValue={innerWorkflow.status}
|
||||||
|
onChange={(e) => {
|
||||||
|
console.log("Data: ", e.target.value)
|
||||||
|
|
||||||
|
innerWorkflow.workflow_type = e.target.value
|
||||||
|
setInnerWorkflow(innerWorkflow)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormControlLabel value="test" control={<Radio />} label="Test" />
|
||||||
|
<FormControlLabel value="production" control={<Radio />} label="Production" />
|
||||||
|
|
||||||
|
</RadioGroup>
|
||||||
|
</FormControl>
|
||||||
|
<div />
|
||||||
|
|
||||||
|
<FormControl style={{marginTop: 15, }}>
|
||||||
|
<FormLabel id="demo-row-radio-buttons-group-label">Type</FormLabel>
|
||||||
|
<RadioGroup
|
||||||
|
row
|
||||||
|
aria-labelledby="demo-row-radio-buttons-group-label"
|
||||||
|
name="row-radio-buttons-group"
|
||||||
|
defaultValue={innerWorkflow.workflow_type}
|
||||||
|
onChange={(e) => {
|
||||||
|
console.log("Data: ", e.target.value)
|
||||||
|
|
||||||
|
innerWorkflow.workflow_type = e.target.value
|
||||||
|
setInnerWorkflow(innerWorkflow)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormControlLabel value="trigger" control={<Radio />} label="Trigger" />
|
||||||
|
<FormControlLabel value="subflow" control={<Radio />} label="Subflow" />
|
||||||
|
<FormControlLabel value="standalone" control={<Radio />} label="Standalone" />
|
||||||
|
|
||||||
|
</RadioGroup>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
onBlur={(event) => {
|
||||||
|
innerWorkflow.blogpost = event.target.value
|
||||||
|
setInnerWorkflow(innerWorkflow)
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
defaultValue={innerWorkflow.blogpost}
|
||||||
|
placeholder="A blogpost or other reference for how this work workflow was built, and what it's for."
|
||||||
|
rows="1"
|
||||||
|
label="blogpost"
|
||||||
|
margin="dense"
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
onBlur={(event) => {
|
||||||
|
innerWorkflow.video = event.target.value
|
||||||
|
setInnerWorkflow(innerWorkflow)
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
defaultValue={innerWorkflow.video}
|
||||||
|
placeholder="A youtube or loom link to the video"
|
||||||
|
rows="1"
|
||||||
|
label="Video"
|
||||||
|
margin="dense"
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
onBlur={(event) => {
|
||||||
|
innerWorkflow.default_return_value = event.target.value
|
||||||
|
setInnerWorkflow(innerWorkflow)
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
defaultValue={innerWorkflow.default_return_value}
|
||||||
|
placeholder="Default return value (used for Subflows if the subflow fails)"
|
||||||
|
rows="3"
|
||||||
|
multiline
|
||||||
|
label="Default return value"
|
||||||
|
margin="dense"
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
: null}
|
||||||
|
<Tooltip color="primary" title={"Add more details"} placement="top">
|
||||||
|
<IconButton
|
||||||
|
style={{ color: "white", margin: "auto", marginTop: 10, textAlign: "center", width: 50,}}
|
||||||
|
onClick={() => {
|
||||||
|
setShowMoreClicked(!showMoreClicked);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{showMoreClicked ? <ExpandLessIcon /> : <ExpandMoreIcon/>}
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
{/*newWorkflow === true ?
|
||||||
|
<div style={{marginLeft: 50, maxWidth: 400, minWidth: 400, position: "relative",}}>
|
||||||
|
<UsecaseSearch
|
||||||
|
globalUrl={globalUrl}
|
||||||
|
appFramework={appFramework}
|
||||||
|
defaultSearch={undefined}
|
||||||
|
apps={undefined}
|
||||||
|
setFoundWorkflowId={setFoundWorkflowId}
|
||||||
|
userdata={userdata}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
: null*/}
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button
|
||||||
|
style={{}}
|
||||||
|
onClick={() => {
|
||||||
|
if (setNewWorkflow !== undefined) {
|
||||||
|
setWorkflow({})
|
||||||
|
}
|
||||||
|
|
||||||
|
setModalOpen(false)
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
style={{}}
|
||||||
|
disabled={name.length === 0}
|
||||||
|
onClick={() => {
|
||||||
|
innerWorkflow.name = name
|
||||||
|
innerWorkflow.description = description
|
||||||
|
if (newWorkflowTags.length > 0) {
|
||||||
|
innerWorkflow.tags = newWorkflowTags
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedUsecases.length > 0) {
|
||||||
|
innerWorkflow.usecase_ids = selectedUsecases
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (setNewWorkflow !== undefined) {
|
||||||
|
setNewWorkflow(
|
||||||
|
innerWorkflow.name,
|
||||||
|
innerWorkflow.description,
|
||||||
|
innerWorkflow.tags,
|
||||||
|
innerWorkflow.default_return_value,
|
||||||
|
innerWorkflow,
|
||||||
|
newWorkflow,
|
||||||
|
innerWorkflow.usecase_ids,
|
||||||
|
innerWorkflow.blogpost,
|
||||||
|
innerWorkflow.status,
|
||||||
|
)
|
||||||
|
setWorkflow({})
|
||||||
|
} else {
|
||||||
|
setWorkflow(innerWorkflow)
|
||||||
|
console.log("editing workflow: ", innerWorkflow)
|
||||||
|
}
|
||||||
|
|
||||||
|
setModalOpen(false)
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
{submitLoading ? <CircularProgress color="secondary" /> : "Submit"}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</FormControl>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EditWorkflow;
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
// Move this to the backend to be loaded in?
|
||||||
|
const extraApps = [{
|
||||||
|
"name": "Cases",
|
||||||
|
"description": "Allows use of other Case Management apps without knowing how to use them.",
|
||||||
|
"app_version": "1.0.0",
|
||||||
|
"app_name": "Cases",
|
||||||
|
"type": "ACTION",
|
||||||
|
"large_image": encodeURI('data:image/svg+xml;utf-8,<svg fill="rgb(248,90,62)" width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M15.6408 8.39233H18.0922V10.0287H15.6408V8.39233ZM0.115234 8.39233H2.56663V10.0287H0.115234V8.39233ZM9.92083 0.21051V2.66506H8.28656V0.21051H9.92083ZM3.31839 2.25596L5.05889 4.00687L3.89856 5.16051L2.15807 3.42596L3.31839 2.25596ZM13.1485 3.99869L14.8808 2.25596L16.0493 3.42596L14.3088 5.16051L13.1485 3.99869ZM9.10369 4.30142C10.404 4.30142 11.651 4.81863 12.5705 5.73926C13.4899 6.65989 14.0065 7.90854 14.0065 9.21051C14.0065 11.0269 13.0178 12.6141 11.5551 13.4651V14.9378C11.5551 15.1548 11.469 15.3629 11.3158 15.5163C11.1625 15.6698 10.9547 15.756 10.738 15.756H7.46943C7.25271 15.756 7.04487 15.6698 6.89163 15.5163C6.73839 15.3629 6.6523 15.1548 6.6523 14.9378V13.4651C5.18963 12.6141 4.2009 11.0269 4.2009 9.21051C4.2009 7.90854 4.71744 6.65989 5.63689 5.73926C6.55635 4.81863 7.80339 4.30142 9.10369 4.30142ZM10.738 16.5741V17.3923C10.738 17.6093 10.6519 17.8174 10.4986 17.9709C10.3454 18.1243 10.1375 18.2105 9.92083 18.2105H8.28656C8.06984 18.2105 7.862 18.1243 7.70876 17.9709C7.55552 17.8174 7.46943 17.6093 7.46943 17.3923V16.5741H10.738ZM8.28656 14.1196H9.92083V12.3769C11.3345 12.0169 12.3722 10.7323 12.3722 9.21051C12.3722 8.34253 12.0279 7.5101 11.4149 6.89634C10.8019 6.28259 9.97056 5.93778 9.10369 5.93778C8.23683 5.93778 7.40546 6.28259 6.79249 6.89634C6.17953 7.5101 5.83516 8.34253 5.83516 9.21051C5.83516 10.7323 6.87292 12.0169 8.28656 12.3769V14.1196Z" /></svg>'),
|
||||||
|
"template": true,
|
||||||
|
"actions": [{
|
||||||
|
"name": "Create Alert",
|
||||||
|
"description": "Create a ticket",
|
||||||
|
"parameters": [{
|
||||||
|
"name": "id",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "name",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "description",
|
||||||
|
"multiline": true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}],
|
||||||
|
}]
|
||||||
|
|
||||||
|
export default extraApps
|
||||||
@@ -0,0 +1,809 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
IconButton,
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListItemText,
|
||||||
|
ListItemAvatar,
|
||||||
|
ListItemSecondaryAction,
|
||||||
|
Tooltip,
|
||||||
|
Button,
|
||||||
|
FormControl,
|
||||||
|
InputLabel,
|
||||||
|
TextField,
|
||||||
|
Divider,
|
||||||
|
Select,
|
||||||
|
MenuItem,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
OpenInNew as OpenInNewIcon,
|
||||||
|
Edit as EditIcon,
|
||||||
|
CloudDownload as CloudDownloadIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
FileCopy as FileCopyIcon,
|
||||||
|
Cached as CachedIcon,
|
||||||
|
Publish as PublishIcon,
|
||||||
|
Clear as ClearIcon,
|
||||||
|
Add as AddIcon,
|
||||||
|
} from "@material-ui/icons";
|
||||||
|
|
||||||
|
import { useAlert } from "react-alert";
|
||||||
|
import Dropzone from "../components/Dropzone.jsx";
|
||||||
|
import CodeEditor from "../components/ShuffleCodeEditor.jsx";
|
||||||
|
import theme from "../theme.jsx";
|
||||||
|
|
||||||
|
const Files = (props) => {
|
||||||
|
const { globalUrl, userdata, serverside, selectedOrganization, isCloud, } = props;
|
||||||
|
|
||||||
|
const [files, setFiles] = React.useState([]);
|
||||||
|
const [selectedNamespace, setSelectedNamespace] = React.useState("default");
|
||||||
|
const [openFileId, setOpenFileId] = React.useState(false);
|
||||||
|
const [fileNamespaces, setFileNamespaces] = React.useState([]);
|
||||||
|
const [fileContent, setFileContent] = React.useState("");
|
||||||
|
const [openEditor, setOpenEditor] = React.useState(false);
|
||||||
|
const [renderTextBox, setRenderTextBox] = React.useState(false);
|
||||||
|
|
||||||
|
const alert = useAlert();
|
||||||
|
const allowedFileTypes = ["txt", "py", "yaml", "yml","json", "html", "js", "csv", "log"]
|
||||||
|
var upload = "";
|
||||||
|
|
||||||
|
const handleKeyDown = (event) => {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
|
||||||
|
console.log('do validate')
|
||||||
|
console.log("new namespace name->",event.target.value);
|
||||||
|
fileNamespaces.push(event.target.value);
|
||||||
|
setSelectedNamespace(event.target.value);
|
||||||
|
setRenderTextBox(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === 'Escape'){ // not working for some reasons
|
||||||
|
console.log('escape pressed')
|
||||||
|
setRenderTextBox(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const runUpdateText = (text) =>{
|
||||||
|
fetch(`${globalUrl}/api/v1/files/${openFileId}/edit`, {
|
||||||
|
method: "PUT",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
body:text,
|
||||||
|
credentials: "include",
|
||||||
|
}).then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Can't update file");
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
//console.log(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFiles = () => {
|
||||||
|
fetch(globalUrl + "/api/v1/files", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson.files !== undefined && responseJson.files !== null) {
|
||||||
|
setFiles(responseJson.files);
|
||||||
|
} else {
|
||||||
|
setFiles([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (responseJson.namespaces !== undefined && responseJson.namespaces !== null) {
|
||||||
|
setFileNamespaces(responseJson.namespaces);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getFiles();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const deleteFile = (file) => {
|
||||||
|
fetch(globalUrl + "/api/v1/files/" + file.id, {
|
||||||
|
method: "DELETE",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for file delete :O!");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson.success) {
|
||||||
|
alert.info("Successfully deleted file " + file.name);
|
||||||
|
} else if (
|
||||||
|
responseJson.reason !== undefined &&
|
||||||
|
responseJson.reason !== null
|
||||||
|
) {
|
||||||
|
alert.error("Failed to delete file: " + responseJson.reason);
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
getFiles();
|
||||||
|
}, 1500);
|
||||||
|
|
||||||
|
console.log(responseJson);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const readFileData = (file) => {
|
||||||
|
fetch(globalUrl + "/api/v1/files/" + file.id + "/content", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for file :O!");
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
return response.text();
|
||||||
|
})
|
||||||
|
.then((respdata) => {
|
||||||
|
// console.log("respdata ->", respdata);
|
||||||
|
// console.log("respdata type ->", typeof(respdata));
|
||||||
|
|
||||||
|
if (respdata.length === 0) {
|
||||||
|
alert.error("Failed getting file. Is it deleted?");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return respdata
|
||||||
|
})
|
||||||
|
.then((responseData) => {
|
||||||
|
|
||||||
|
setFileContent(responseData);
|
||||||
|
//console.log("filecontent state ",fileContent);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const downloadFile = (file) => {
|
||||||
|
fetch(globalUrl + "/api/v1/files/" + file.id + "/content", {
|
||||||
|
method: "GET",
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Resp: ", response)
|
||||||
|
|
||||||
|
return response.blob()
|
||||||
|
})
|
||||||
|
.then((respdata) => {
|
||||||
|
if (respdata.length === 0) {
|
||||||
|
alert.error("Failed getting file. Is it deleted?");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var blob = new Blob([respdata], {
|
||||||
|
type: "application/octet-stream",
|
||||||
|
});
|
||||||
|
|
||||||
|
var url = URL.createObjectURL(blob);
|
||||||
|
var link = document.createElement("a");
|
||||||
|
link.setAttribute("href", url);
|
||||||
|
link.setAttribute("download", `${file.filename}`);
|
||||||
|
var event = document.createEvent("MouseEvents");
|
||||||
|
event.initMouseEvent(
|
||||||
|
"click",
|
||||||
|
true,
|
||||||
|
true,
|
||||||
|
window,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
0,
|
||||||
|
null
|
||||||
|
);
|
||||||
|
link.dispatchEvent(event);
|
||||||
|
|
||||||
|
//return response.json()
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
//console.log(responseJson)
|
||||||
|
//setSchedules(responseJson)
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateFile = (filename, file) => {
|
||||||
|
var data = {
|
||||||
|
filename: filename,
|
||||||
|
org_id: selectedOrganization.id,
|
||||||
|
workflow_id: "global",
|
||||||
|
};
|
||||||
|
|
||||||
|
if (
|
||||||
|
selectedNamespace !== undefined &&
|
||||||
|
selectedNamespace !== null &&
|
||||||
|
selectedNamespace.length > 0 &&
|
||||||
|
selectedNamespace !== "default"
|
||||||
|
) {
|
||||||
|
data.namespace = selectedNamespace;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(globalUrl + "/api/v1/files/create", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
//console.log("RESP: ", responseJson)
|
||||||
|
if (responseJson.success === true) {
|
||||||
|
handleFileUpload(responseJson.id, file);
|
||||||
|
} else {
|
||||||
|
alert.error("Failed to upload file ", filename);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error("Failed to upload file ", filename);
|
||||||
|
console.log(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const handleFileUpload = (file_id, file) => {
|
||||||
|
//console.log("FILE: ", file_id, file)
|
||||||
|
fetch(`${globalUrl}/api/v1/files/${file_id}/upload`, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
body: file,
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200 && response.status !== 201) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
alert.error("File was created, but failed to upload.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
//console.log("RESPONSE: ", responseJson)
|
||||||
|
//setFiles(responseJson)
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error(error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const uploadFiles = (files) => {
|
||||||
|
for (var key in files) {
|
||||||
|
try {
|
||||||
|
const filename = files[key].name;
|
||||||
|
var filedata = new FormData();
|
||||||
|
filedata.append("shuffle_file", files[key]);
|
||||||
|
|
||||||
|
if (typeof files[key] === "object") {
|
||||||
|
handleCreateFile(filename, filedata);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
reader.addEventListener('load', (e) => {
|
||||||
|
var data = e.target.result;
|
||||||
|
setIsDropzone(false)
|
||||||
|
console.log(filename)
|
||||||
|
console.log(data)
|
||||||
|
console.log(files[key])
|
||||||
|
})
|
||||||
|
reader.readAsText(files[key])
|
||||||
|
*/
|
||||||
|
} catch (e) {
|
||||||
|
console.log("Error in dropzone: ", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
getFiles();
|
||||||
|
}, 2500);
|
||||||
|
};
|
||||||
|
|
||||||
|
const uploadFile = (e) => {
|
||||||
|
const isDropzone =
|
||||||
|
e.dataTransfer === undefined ? false : e.dataTransfer.files.length > 0;
|
||||||
|
const files = isDropzone ? e.dataTransfer.files : e.target.files;
|
||||||
|
|
||||||
|
//const reader = new FileReader();
|
||||||
|
//alert.info("Starting fileupload")
|
||||||
|
uploadFiles(files);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dropzone
|
||||||
|
style={{
|
||||||
|
maxWidth: window.innerWidth > 1366 ? 1366 : 1200,
|
||||||
|
margin: "auto",
|
||||||
|
padding: 20,
|
||||||
|
}}
|
||||||
|
onDrop={uploadFile}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div style={{ marginTop: 20, marginBottom: 20 }}>
|
||||||
|
<h2 style={{ display: "inline" }}>Files</h2>
|
||||||
|
<span style={{ marginLeft: 25 }}>
|
||||||
|
Files from Workflows.{" "}
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
href="https://shuffler.io/docs/organizations#files"
|
||||||
|
style={{ textDecoration: "none", color: "#f85a3e" }}
|
||||||
|
>
|
||||||
|
Learn more
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => {
|
||||||
|
upload.click();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PublishIcon /> Upload files
|
||||||
|
</Button>
|
||||||
|
{/* <FileCategoryInput
|
||||||
|
isSet={renderTextBox} /> */}
|
||||||
|
<input
|
||||||
|
hidden
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
ref={(ref) => (upload = ref)}
|
||||||
|
onChange={(event) => {
|
||||||
|
//const file = event.target.value
|
||||||
|
//const fileObject = URL.createObjectURL(actualFile)
|
||||||
|
//setFile(fileObject)
|
||||||
|
//const files = event.target.files[0]
|
||||||
|
uploadFiles(event.target.files);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
style={{ marginLeft: 5, marginRight: 15 }}
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
onClick={() => getFiles()}
|
||||||
|
>
|
||||||
|
<CachedIcon />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{fileNamespaces !== undefined &&
|
||||||
|
fileNamespaces !== null &&
|
||||||
|
fileNamespaces.length > 1 ? (
|
||||||
|
<FormControl style={{ minWidth: 150, maxWidth: 150 }}>
|
||||||
|
<InputLabel id="input-namespace-label">File Category</InputLabel>
|
||||||
|
<Select
|
||||||
|
labelId="input-namespace-select-label"
|
||||||
|
id="input-namespace-select-id"
|
||||||
|
style={{
|
||||||
|
color: "white",
|
||||||
|
minWidth: 150,
|
||||||
|
maxWidth: 150,
|
||||||
|
float: "right",
|
||||||
|
}}
|
||||||
|
value={selectedNamespace}
|
||||||
|
onChange={(event) => {
|
||||||
|
console.log("CHANGE NAMESPACE: ", event.target);
|
||||||
|
setSelectedNamespace(event.target.value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{fileNamespaces.map((data, index) => {
|
||||||
|
return (
|
||||||
|
<MenuItem
|
||||||
|
key={index}
|
||||||
|
value={data}
|
||||||
|
style={{ color: "white" }}
|
||||||
|
>
|
||||||
|
{data}
|
||||||
|
</MenuItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
) : null}
|
||||||
|
<div style={{display: "inline-flex", position:"relative"}}>
|
||||||
|
{renderTextBox ?
|
||||||
|
|
||||||
|
<Tooltip title={"Close"} style={{}} aria-label={""}>
|
||||||
|
<Button
|
||||||
|
style={{ marginLeft: 5, marginRight: 15 }}
|
||||||
|
color="primary"
|
||||||
|
onClick={() => {
|
||||||
|
setRenderTextBox(false);
|
||||||
|
console.log(" close clicked")
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ClearIcon/>
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
:
|
||||||
|
<Tooltip title={"Add new file category"} style={{}} aria-label={""}>
|
||||||
|
<Button
|
||||||
|
style={{ marginLeft: 5, marginRight: 15 }}
|
||||||
|
color="primary"
|
||||||
|
onClick={() => {
|
||||||
|
setRenderTextBox(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AddIcon/>
|
||||||
|
</Button>
|
||||||
|
</Tooltip> }
|
||||||
|
{renderTextBox && <TextField
|
||||||
|
onKeyPress={(event)=>{
|
||||||
|
handleKeyDown(event);
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
style: {
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
placeholder="File category name"
|
||||||
|
required
|
||||||
|
margin="dense"
|
||||||
|
defaultValue={""}
|
||||||
|
autoFocus
|
||||||
|
/>}</div>
|
||||||
|
|
||||||
|
<CodeEditor
|
||||||
|
isCloud={isCloud}
|
||||||
|
expansionModalOpen={openEditor}
|
||||||
|
setExpansionModalOpen={setOpenEditor}
|
||||||
|
setcodedata = {setFileContent}
|
||||||
|
codedata={fileContent}
|
||||||
|
isFileEditor = {true}
|
||||||
|
key = {fileContent} //https://reactjs.org/docs/reconciliation.html#recursing-on-children
|
||||||
|
runUpdateText = {runUpdateText}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Divider
|
||||||
|
style={{
|
||||||
|
marginTop: 20,
|
||||||
|
marginBottom: 20,
|
||||||
|
backgroundColor: theme.palette.inputColor,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<List>
|
||||||
|
<ListItem>
|
||||||
|
<ListItemText
|
||||||
|
primary="Updated"
|
||||||
|
style={{ maxWidth: 225, minWidth: 225 }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Name"
|
||||||
|
style={{
|
||||||
|
maxWidth: 150,
|
||||||
|
minWidth: 150,
|
||||||
|
overflow: "hidden",
|
||||||
|
marginLeft: 10,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Workflow"
|
||||||
|
style={{ maxWidth: 100, minWidth: 100, overflow: "hidden" }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Md5"
|
||||||
|
style={{ minWidth: 300, maxWidth: 300, overflow: "hidden" }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Status"
|
||||||
|
style={{ minWidth: 75, maxWidth: 75, marginLeft: 10 }}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary="Filesize"
|
||||||
|
style={{ minWidth: 125, maxWidth: 125 }}
|
||||||
|
/>
|
||||||
|
<ListItemText primary="Actions" />
|
||||||
|
</ListItem>
|
||||||
|
{files === undefined || files === null || files.length === 0 ? null :
|
||||||
|
files.map((file, index) => {
|
||||||
|
if (file.namespace === "") {
|
||||||
|
file.namespace = "default";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (file.namespace !== selectedNamespace) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
var bgColor = "#27292d";
|
||||||
|
if (index % 2 === 0) {
|
||||||
|
bgColor = "#1f2023";
|
||||||
|
}
|
||||||
|
|
||||||
|
const filenamesplit = file.filename.split(".")
|
||||||
|
const iseditable = file.filesize < 2000000 && file.status === "active" && allowedFileTypes.includes(filenamesplit[filenamesplit.length-1])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ListItem
|
||||||
|
key={index}
|
||||||
|
style={{
|
||||||
|
backgroundColor: bgColor,
|
||||||
|
maxHeight: 100,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ListItemText
|
||||||
|
style={{
|
||||||
|
maxWidth: 225,
|
||||||
|
minWidth: 225,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
primary={new Date(file.updated_at * 1000).toISOString()}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
style={{
|
||||||
|
maxWidth: 150,
|
||||||
|
minWidth: 150,
|
||||||
|
overflow: "hidden",
|
||||||
|
marginLeft: 10,
|
||||||
|
}}
|
||||||
|
primary={file.filename}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary={
|
||||||
|
file.workflow_id === "global" ? (
|
||||||
|
<IconButton
|
||||||
|
disabled={file.workflow_id === "global"}
|
||||||
|
>
|
||||||
|
<OpenInNewIcon
|
||||||
|
style={{
|
||||||
|
color:
|
||||||
|
file.workflow_id !== "global"
|
||||||
|
? "white"
|
||||||
|
: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
) : (
|
||||||
|
<Tooltip
|
||||||
|
title={"Go to workflow"}
|
||||||
|
style={{}}
|
||||||
|
aria-label={"Download"}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<a
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
style={{
|
||||||
|
textDecoration: "none",
|
||||||
|
color: "#f85a3e",
|
||||||
|
}}
|
||||||
|
href={`/workflows/${file.workflow_id}`}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
disabled={file.workflow_id === "global"}
|
||||||
|
>
|
||||||
|
<OpenInNewIcon
|
||||||
|
style={{
|
||||||
|
color:
|
||||||
|
file.workflow_id !== "global"
|
||||||
|
? "white"
|
||||||
|
: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
style={{
|
||||||
|
minWidth: 100,
|
||||||
|
maxWidth: 100,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary={file.md5_sum}
|
||||||
|
style={{
|
||||||
|
minWidth: 300,
|
||||||
|
maxWidth: 300,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary={file.status}
|
||||||
|
style={{
|
||||||
|
minWidth: 75,
|
||||||
|
maxWidth: 75,
|
||||||
|
overflow: "hidden",
|
||||||
|
marginLeft: 10,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary={file.filesize}
|
||||||
|
style={{
|
||||||
|
minWidth: 125,
|
||||||
|
maxWidth: 125,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ListItemText
|
||||||
|
primary=<span style={{ display:"inline"}}>
|
||||||
|
<Tooltip
|
||||||
|
title={`Edit File (${allowedFileTypes.join(", ")})`}
|
||||||
|
style={{}}
|
||||||
|
aria-label={"Edit"}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<IconButton
|
||||||
|
disabled={!iseditable}
|
||||||
|
style = {{padding: "6px"}}
|
||||||
|
onClick={() => {
|
||||||
|
setOpenEditor(true)
|
||||||
|
setOpenFileId(file.id)
|
||||||
|
readFileData(file)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EditIcon
|
||||||
|
style={{color: iseditable ? "white" : "grey",}}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip
|
||||||
|
title={"Download file"}
|
||||||
|
style={{}}
|
||||||
|
aria-label={"Download"}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<IconButton
|
||||||
|
style = {{padding: "6px"}}
|
||||||
|
disabled={file.status !== "active"}
|
||||||
|
onClick={() => {
|
||||||
|
downloadFile(file);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloudDownloadIcon
|
||||||
|
style={{
|
||||||
|
color:
|
||||||
|
file.status === "active"
|
||||||
|
? "white"
|
||||||
|
: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip
|
||||||
|
title={"Copy file ID"}
|
||||||
|
style={{}}
|
||||||
|
aria-label={"copy"}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
style = {{padding: "6px"}}
|
||||||
|
onClick={() => {
|
||||||
|
const elementName = "copy_element_shuffle";
|
||||||
|
var copyText =
|
||||||
|
document.getElementById(elementName);
|
||||||
|
if (
|
||||||
|
copyText !== null &&
|
||||||
|
copyText !== undefined
|
||||||
|
) {
|
||||||
|
const clipboard = navigator.clipboard;
|
||||||
|
if (clipboard === undefined) {
|
||||||
|
alert.error(
|
||||||
|
"Can only copy over HTTPS (port 3443)"
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
navigator.clipboard.writeText(file.id);
|
||||||
|
copyText.select();
|
||||||
|
copyText.setSelectionRange(
|
||||||
|
0,
|
||||||
|
99999
|
||||||
|
); /* For mobile devices */
|
||||||
|
|
||||||
|
/* Copy the text inside the text field */
|
||||||
|
document.execCommand("copy");
|
||||||
|
|
||||||
|
alert.info(file.id + " copied to clipboard");
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FileCopyIcon style={{ color: "white" }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip
|
||||||
|
title={"Delete file"}
|
||||||
|
style={{marginLeft: 15, }}
|
||||||
|
aria-label={"Delete"}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<IconButton
|
||||||
|
disabled={file.status !== "active"}
|
||||||
|
style = {{padding: "6px"}}
|
||||||
|
onClick={() => {
|
||||||
|
deleteFile(file);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteIcon
|
||||||
|
style={{
|
||||||
|
color:
|
||||||
|
file.status === "active"
|
||||||
|
? "white"
|
||||||
|
: "grey",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
</span>
|
||||||
|
style={{
|
||||||
|
minWidth: 250,
|
||||||
|
maxWidth: 250,
|
||||||
|
// overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</List>
|
||||||
|
</div>
|
||||||
|
</Dropzone>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Files;
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,19 @@
|
|||||||
|
import React, {useState, useEffect, useLayoutEffect} from 'react';
|
||||||
|
|
||||||
|
import Draggable from "react-draggable";
|
||||||
|
import {
|
||||||
|
Paper
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
const PaperComponent = (props) => {
|
||||||
|
return (
|
||||||
|
<Draggable
|
||||||
|
handle="#draggable-dialog-title"
|
||||||
|
cancel={'[class*="MuiDialogContent-root"]'}
|
||||||
|
>
|
||||||
|
<Paper {...props} />
|
||||||
|
</Draggable>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PaperComponent;
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
import theme from "../theme.jsx";
|
||||||
|
import {
|
||||||
|
Paper,
|
||||||
|
Typography,
|
||||||
|
Divider,
|
||||||
|
Button,
|
||||||
|
Grid,
|
||||||
|
Card,
|
||||||
|
Switch,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import Priority from "../components/Priority.jsx";
|
||||||
|
import { useAlert } from "react-alert";
|
||||||
|
|
||||||
|
const Priorities = (props) => {
|
||||||
|
const { globalUrl, userdata, serverside, billingInfo, stripeKey, checkLogin, } = props;
|
||||||
|
const [showDismissed, setShowDismissed] = React.useState(false);
|
||||||
|
const [showRead, setShowRead] = React.useState(false);
|
||||||
|
|
||||||
|
if (userdata === undefined || userdata === null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{maxWidth: 1000, }}>
|
||||||
|
<h2 style={{ display: "inline" }}>Suggestions</h2>
|
||||||
|
<span style={{ marginLeft: 25 }}>
|
||||||
|
Suggestions are tasks identified by Shuffle to help you discover ways to protect your and customers' company. These range from simple configurations in Shuffle to Usecases you may have missed.
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
href="/docs/organizations#priorities"
|
||||||
|
style={{ textDecoration: "none", color: "#f85a3e" }}
|
||||||
|
>
|
||||||
|
Learn more
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<div style={{marginTop: 10, }}/>
|
||||||
|
<Switch
|
||||||
|
checked={showDismissed}
|
||||||
|
onChange={() => {
|
||||||
|
setShowDismissed(!showDismissed);
|
||||||
|
}}
|
||||||
|
/> Show dismissed
|
||||||
|
{userdata.priorities === null || userdata.priorities === undefined || userdata.priorities.length === 0 ?
|
||||||
|
<Typography variant="h4">
|
||||||
|
No Suggestions found
|
||||||
|
</Typography>
|
||||||
|
:
|
||||||
|
userdata.priorities.map((priority, index) => {
|
||||||
|
if (showDismissed === false && priority.active === false) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Priority
|
||||||
|
key={index}
|
||||||
|
globalUrl={globalUrl}
|
||||||
|
priority={priority}
|
||||||
|
checkLogin={checkLogin}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
<Divider style={{marginTop: 50, marginBottom: 50, }} />
|
||||||
|
<h2 style={{ display: "inline" }}>Notifications</h2>
|
||||||
|
<span style={{ marginLeft: 25 }}>
|
||||||
|
Notifications help you find potential problems with your workflows and apps.
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
href="/docs/organizations#notifications"
|
||||||
|
style={{ textDecoration: "none", color: "#f85a3e" }}
|
||||||
|
>
|
||||||
|
Learn more
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<div/>
|
||||||
|
<Switch
|
||||||
|
checked={showRead}
|
||||||
|
onChange={() => {
|
||||||
|
setShowRead(!showRead);
|
||||||
|
}}
|
||||||
|
/> Show read
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Priorities;
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
import theme from "../theme.jsx";
|
||||||
|
import { useNavigate, Link } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
Paper,
|
||||||
|
Typography,
|
||||||
|
Divider,
|
||||||
|
Button,
|
||||||
|
Grid,
|
||||||
|
Card,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
// import magic wand icon from material ui icons
|
||||||
|
import {
|
||||||
|
AutoFixHigh as AutoFixHighIcon,
|
||||||
|
ArrowForward as ArrowForwardIcon,
|
||||||
|
} from '@mui/icons-material';
|
||||||
|
import { useAlert } from "react-alert";
|
||||||
|
|
||||||
|
const Priority = (props) => {
|
||||||
|
const { globalUrl, userdata, serverside, priority, checkLogin, } = props;
|
||||||
|
|
||||||
|
|
||||||
|
let navigate = useNavigate();
|
||||||
|
const changeRecommendation = (recommendation, action) => {
|
||||||
|
const data = {
|
||||||
|
action: action,
|
||||||
|
name: recommendation.name,
|
||||||
|
};
|
||||||
|
|
||||||
|
fetch(`${globalUrl}/api/v1/recommendations/modify`, {
|
||||||
|
mode: "cors",
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
credentials: "include",
|
||||||
|
crossDomain: true,
|
||||||
|
withCredentials: true,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json; charset=utf-8",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status === 200) {
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson.success === true) {
|
||||||
|
if (checkLogin !== undefined) {
|
||||||
|
checkLogin()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (responseJson.success === false && responseJson.reason !== undefined) {
|
||||||
|
alert.error("Failed change recommendation: ", responseJson.reason)
|
||||||
|
} else {
|
||||||
|
alert.error("Failed change recommendation");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.info("Failed dismissing alert. Please contact support@shuffler.io if this persists.");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{border: priority.active === false ? "1px solid #000000" : priority.severity === 1 ? "1px solid #f85a3e" : "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, marginTop: 10, marginBottom: 10, padding: 15, textAlign: "center", height: 70, textAlign: "left", backgroundColor: theme.palette.surfaceColor, display: "flex", }}>
|
||||||
|
<div style={{flex: 2, overflow: "hidden",}}>
|
||||||
|
<span style={{display: "flex", }}>
|
||||||
|
{priority.type === "usecase" || priority.type == "apps" ? <AutoFixHighIcon style={{height: 19, width: 19, marginLeft: 3, marginRight: 10, }}/> : null}
|
||||||
|
<Typography variant="body1" >
|
||||||
|
{priority.name}
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
{priority.type === "usecase" && priority.description.includes("&") ?
|
||||||
|
<span style={{display: "flex", marginTop: 10, }}>
|
||||||
|
<img src={priority.description.split("&")[1]} alt={priority.name} style={{height: 30, width: 30, marginRight: 5, borderRadius: theme.palette.borderRadius, marginRight: 10, }} />
|
||||||
|
<Typography variant="body2" color="textSecondary" style={{marginTop: 3, }}>
|
||||||
|
{priority.description.split("&")[0]}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{priority.description.split("&").length > 3 ?
|
||||||
|
<span style={{display: "flex", }}>
|
||||||
|
<ArrowForwardIcon style={{marginLeft: 15, marginRight: 15, }}/>
|
||||||
|
<img src={priority.description.split("&")[3]} alt={priority.name+"2"} style={{height: 30, width: 30, borderRadius: theme.palette.borderRadius, marginRight: 10, }} />
|
||||||
|
<Typography variant="body2" color="textSecondary" style={{marginTop: 3}}>
|
||||||
|
{priority.description.split("&")[2]}
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
: null}
|
||||||
|
|
||||||
|
</span>
|
||||||
|
:
|
||||||
|
<Typography variant="body2" color="textSecondary">
|
||||||
|
{priority.description}
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div style={{flex: 1, display: "flex", marginLeft: 30, }}>
|
||||||
|
<Button style={{height: 50, borderRadius: 25, marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" : "black", backgroundColor: priority.active === false ? theme.palette.inputColor : "white", }} variant="contained" color="secondary" onClick={() => {
|
||||||
|
/*
|
||||||
|
ReactGA.event({
|
||||||
|
category: "",
|
||||||
|
action: `partner_${partner.name}_click`,
|
||||||
|
label: "",
|
||||||
|
})
|
||||||
|
*/
|
||||||
|
navigate(priority.url)
|
||||||
|
}}>
|
||||||
|
explore
|
||||||
|
</Button>
|
||||||
|
{priority.active === true ?
|
||||||
|
<Button style={{borderRadius: 25, width: 100, height: 50, marginTop: 8, }} variant="text" color="secondary" onClick={() => {
|
||||||
|
// dismiss -> get envs
|
||||||
|
changeRecommendation(priority, "dismiss")
|
||||||
|
}}>
|
||||||
|
Dismiss
|
||||||
|
</Button>
|
||||||
|
: null }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Priority;
|
||||||
@@ -0,0 +1,157 @@
|
|||||||
|
import React, { useState, useEffect, useLayoutEffect } from "react";
|
||||||
|
import * as cytoscape from "cytoscape";
|
||||||
|
import CytoscapeComponent from "react-cytoscapejs";
|
||||||
|
import cystyle from "../defaultCytoscapeStyle.jsx";
|
||||||
|
|
||||||
|
const surfaceColor = "#27292D";
|
||||||
|
const CytoscapeWrapper = (props) => {
|
||||||
|
const { globalUrl, inworkflow } = props;
|
||||||
|
|
||||||
|
const [elements, setElements] = useState([]);
|
||||||
|
const [workflow, setWorkflow] = useState(inworkflow);
|
||||||
|
const [cy, setCy] = React.useState();
|
||||||
|
const bodyWidth = 200;
|
||||||
|
const bodyHeight = 150;
|
||||||
|
|
||||||
|
const setupGraph = () => {
|
||||||
|
const actions = workflow.actions.map((action) => {
|
||||||
|
const node = {};
|
||||||
|
node.position = action.position;
|
||||||
|
node.data = action;
|
||||||
|
|
||||||
|
node.data._id = action["id"];
|
||||||
|
node.data.type = "ACTION";
|
||||||
|
node.isStartNode = action["id"] === workflow.start;
|
||||||
|
|
||||||
|
var example = "";
|
||||||
|
if (
|
||||||
|
action.example !== undefined &&
|
||||||
|
action.example !== null &&
|
||||||
|
action.example.length > 0
|
||||||
|
) {
|
||||||
|
example = action.example;
|
||||||
|
}
|
||||||
|
|
||||||
|
node.data.example = example;
|
||||||
|
return node;
|
||||||
|
});
|
||||||
|
|
||||||
|
const triggers = workflow.triggers.map((trigger) => {
|
||||||
|
const node = {};
|
||||||
|
node.position = trigger.position;
|
||||||
|
node.data = trigger;
|
||||||
|
|
||||||
|
node.data._id = trigger["id"];
|
||||||
|
node.data.type = "TRIGGER";
|
||||||
|
|
||||||
|
return node;
|
||||||
|
});
|
||||||
|
|
||||||
|
// FIXME - tmp branch update
|
||||||
|
var insertedNodes = [].concat(actions, triggers);
|
||||||
|
const edges = workflow.branches.map((branch, index) => {
|
||||||
|
//workflow.branches[index].conditions = [{
|
||||||
|
|
||||||
|
const edge = {};
|
||||||
|
var conditions = workflow.branches[index].conditions;
|
||||||
|
if (conditions === undefined || conditions === null) {
|
||||||
|
conditions = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
var label = "";
|
||||||
|
if (conditions.length === 1) {
|
||||||
|
label = conditions.length + " condition";
|
||||||
|
} else if (conditions.length > 1) {
|
||||||
|
label = conditions.length + " conditions";
|
||||||
|
}
|
||||||
|
|
||||||
|
edge.data = {
|
||||||
|
id: branch.id,
|
||||||
|
_id: branch.id,
|
||||||
|
source: branch.source_id,
|
||||||
|
target: branch.destination_id,
|
||||||
|
label: label,
|
||||||
|
conditions: conditions,
|
||||||
|
hasErrors: branch.has_errors,
|
||||||
|
};
|
||||||
|
|
||||||
|
// This is an attempt at prettier edges. The numbers are weird to work with.
|
||||||
|
/*
|
||||||
|
//http://manual.graphspace.org/projects/graphspace-python/en/latest/demos/edge-types.html
|
||||||
|
const sourcenode = actions.find(node => node.data._id === branch.source_id)
|
||||||
|
const destinationnode = actions.find(node => node.data._id === branch.destination_id)
|
||||||
|
if (sourcenode !== undefined && destinationnode !== undefined && branch.source_id !== branch.destination_id) {
|
||||||
|
//node.data._id = action["id"]
|
||||||
|
console.log("SOURCE: ", sourcenode.position)
|
||||||
|
console.log("DESTINATIONNODE: ", destinationnode.position)
|
||||||
|
|
||||||
|
var opposite = true
|
||||||
|
if (sourcenode.position.x > destinationnode.position.x) {
|
||||||
|
opposite = false
|
||||||
|
} else {
|
||||||
|
opposite = true
|
||||||
|
}
|
||||||
|
|
||||||
|
edge.style = {
|
||||||
|
'control-point-distance': opposite ? ["25%", "-75%"] : ["-10%", "90%"],
|
||||||
|
'control-point-weight': ['0.3', '0.7'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
return edge;
|
||||||
|
});
|
||||||
|
|
||||||
|
setWorkflow(workflow);
|
||||||
|
|
||||||
|
// Verifies if a branch is valid and skips others
|
||||||
|
var newedges = [];
|
||||||
|
for (var key in edges) {
|
||||||
|
var item = edges[key];
|
||||||
|
|
||||||
|
const sourcecheck = insertedNodes.find(
|
||||||
|
(data) => data.data.id === item.data.source
|
||||||
|
);
|
||||||
|
const destcheck = insertedNodes.find(
|
||||||
|
(data) => data.data.id === item.data.target
|
||||||
|
);
|
||||||
|
if (sourcecheck === undefined || destcheck === undefined) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
newedges.push(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
insertedNodes = insertedNodes.concat(newedges);
|
||||||
|
setElements(insertedNodes);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (elements.length === 0) {
|
||||||
|
setupGraph();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CytoscapeComponent
|
||||||
|
elements={elements}
|
||||||
|
minZoom={0.35}
|
||||||
|
maxZoom={2.0}
|
||||||
|
style={{
|
||||||
|
width: bodyWidth - 15,
|
||||||
|
height: bodyHeight - 5,
|
||||||
|
backgroundColor: surfaceColor,
|
||||||
|
}}
|
||||||
|
stylesheet={cystyle}
|
||||||
|
boxSelectionEnabled={true}
|
||||||
|
autounselectify={false}
|
||||||
|
showGrid={true}
|
||||||
|
cy={(incy) => {
|
||||||
|
// FIXME: There's something specific loading when
|
||||||
|
// you do the first hover of a node. Why is this different?
|
||||||
|
//console.log("CY: ", incy)
|
||||||
|
setCy(incy);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CytoscapeWrapper;
|
||||||
@@ -0,0 +1,652 @@
|
|||||||
|
import React, {useState, useEffect, useRef} from 'react';
|
||||||
|
|
||||||
|
import { useNavigate, Link, useParams } from "react-router-dom";
|
||||||
|
import { useTheme } from '@material-ui/core/styles';
|
||||||
|
import SearchIcon from '@material-ui/icons/Search';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Chip,
|
||||||
|
IconButton,
|
||||||
|
TextField,
|
||||||
|
InputAdornment,
|
||||||
|
List,
|
||||||
|
Card,
|
||||||
|
ListItem,
|
||||||
|
ListItemAvatar,
|
||||||
|
ListItemText,
|
||||||
|
Avatar,
|
||||||
|
Typography,
|
||||||
|
Tooltip,
|
||||||
|
} from '@material-ui/core';
|
||||||
|
|
||||||
|
import {
|
||||||
|
AvatarGroup,
|
||||||
|
} from "@mui/material"
|
||||||
|
|
||||||
|
import {Close as CloseIcon, Folder as FolderIcon, Polymer as PolymerIcon, LibraryBooks as LibraryBooksIcon} from '@material-ui/icons'
|
||||||
|
|
||||||
|
import algoliasearch from 'algoliasearch/lite';
|
||||||
|
import aa from 'search-insights'
|
||||||
|
import { InstantSearch, Configure, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
|
||||||
|
//import { InstantSearch, SearchBox, Hits, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
|
||||||
|
|
||||||
|
// https://www.algolia.com/doc/api-reference/widgets/search-box/react/
|
||||||
|
const chipStyle = {
|
||||||
|
backgroundColor: "#3d3f43", height: 30, marginRight: 5, paddingLeft: 5, paddingRight: 5, height: 28, cursor: "pointer", borderColor: "#3d3f43", color: "white",
|
||||||
|
}
|
||||||
|
|
||||||
|
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
|
||||||
|
const SearchField = props => {
|
||||||
|
const { serverside, userdata } = props
|
||||||
|
|
||||||
|
const theme = useTheme();
|
||||||
|
let navigate = useNavigate();
|
||||||
|
const borderRadius = 3
|
||||||
|
const node = useRef()
|
||||||
|
const [searchOpen, setSearchOpen] = useState(false)
|
||||||
|
const [oldPath, setOldPath] = useState("")
|
||||||
|
|
||||||
|
if (serverside === true) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window !== undefined && window.location !== undefined && window.location.pathname === "/search") {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
|
||||||
|
|
||||||
|
if (window.location.pathname !== oldPath) {
|
||||||
|
setSearchOpen(false)
|
||||||
|
setOldPath(window.location.pathname)
|
||||||
|
}
|
||||||
|
|
||||||
|
//useEffect(() => {
|
||||||
|
// if (searchOpen) {
|
||||||
|
// var tarfield = document.getElementById("shuffle_search_field")
|
||||||
|
// tarfield.focus()
|
||||||
|
// }
|
||||||
|
//}, searchOpen)
|
||||||
|
|
||||||
|
const SearchBox = ({currentRefinement, refine, isSearchStalled, } ) => {
|
||||||
|
|
||||||
|
/*
|
||||||
|
endAdornment: (
|
||||||
|
<InputAdornment position="end" style={{textAlign: "right", zIndex: 5001, cursor: "pointer", width: 100, }} onMouseOver={(event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
}}>
|
||||||
|
<CloseIcon style={{marginRight: 5,}} onClick={() => {
|
||||||
|
setSearchOpen(false)
|
||||||
|
}} />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
*/
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form id="search_form" noValidate type="searchbox" action="" role="search" style={{margin: "10px 0px 0px 0px", }} onClick={() => {
|
||||||
|
}}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
style={{backgroundColor: theme.palette.surfaceColor, borderRadius: borderRadius, minWidth: 403, maxWidth: 403, }}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1em",
|
||||||
|
height: 50,
|
||||||
|
margin: 0,
|
||||||
|
fontSize: "0.9em",
|
||||||
|
paddingLeft: 10,
|
||||||
|
},
|
||||||
|
disableUnderline: true,
|
||||||
|
endAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon style={{marginLeft: 5, color: "#f86a3e",}}/>
|
||||||
|
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
autoComplete='off'
|
||||||
|
type="search"
|
||||||
|
color="primary"
|
||||||
|
placeholder="Find Public Apps, Workflows, Documentation..."
|
||||||
|
value={currentRefinement}
|
||||||
|
id="shuffle_search_field"
|
||||||
|
onClick={(event) => {
|
||||||
|
if (!searchOpen) {
|
||||||
|
setSearchOpen(true)
|
||||||
|
setTimeout(() => {
|
||||||
|
var tarfield = document.getElementById("shuffle_search_field")
|
||||||
|
//console.log("TARFIELD: ", tarfield)
|
||||||
|
tarfield.focus()
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onBlur={(event) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setSearchOpen(false)
|
||||||
|
}, 500)
|
||||||
|
}}
|
||||||
|
onChange={(event) => {
|
||||||
|
//if (event.currentTarget.value.length > 0 && !searchOpen) {
|
||||||
|
// setSearchOpen(true)
|
||||||
|
//}
|
||||||
|
|
||||||
|
refine(event.currentTarget.value)
|
||||||
|
}}
|
||||||
|
limit={5}
|
||||||
|
/>
|
||||||
|
{/*isSearchStalled ? 'My search is stalled' : ''*/}
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const WorkflowHits = ({ hits }) => {
|
||||||
|
const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
|
||||||
|
|
||||||
|
var tmp = searchOpen
|
||||||
|
if (!searchOpen) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const positionInfo = document.activeElement.getBoundingClientRect()
|
||||||
|
const outerlistitemStyle = {
|
||||||
|
width: "100%",
|
||||||
|
overflowX: "hidden",
|
||||||
|
overflowY: "hidden",
|
||||||
|
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hits.length > 4) {
|
||||||
|
hits = hits.slice(0, 4)
|
||||||
|
}
|
||||||
|
|
||||||
|
var type = "workflows"
|
||||||
|
const baseImage = <PolymerIcon />
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card elevation={0} style={{position: "relative", marginLeft: 10, marginRight: 10, position: "absolute", color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: 405, height: 408, left: 75, boxShadows: "none",}}>
|
||||||
|
<Typography variant="h6" style={{margin: "10px 10px 0px 20px", }}>
|
||||||
|
Workflows
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<List style={{backgroundColor: theme.palette.inputColor, }}>
|
||||||
|
{hits.length === 0 ?
|
||||||
|
<ListItem style={outerlistitemStyle}>
|
||||||
|
<ListItemAvatar onClick={() => console.log(hits)}>
|
||||||
|
<Avatar>
|
||||||
|
<FolderIcon />
|
||||||
|
</Avatar>
|
||||||
|
</ListItemAvatar>
|
||||||
|
<ListItemText
|
||||||
|
primary={"No workflows found."}
|
||||||
|
secondary={"Try a broader search term"}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
:
|
||||||
|
hits.map((hit, index) => {
|
||||||
|
const innerlistitemStyle = {
|
||||||
|
width: positionInfo.width+35,
|
||||||
|
overflowX: "hidden",
|
||||||
|
overflowY: "hidden",
|
||||||
|
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||||
|
backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
|
||||||
|
cursor: "pointer",
|
||||||
|
marginLeft: 5,
|
||||||
|
marginRight: 5,
|
||||||
|
maxHeight: 75,
|
||||||
|
minHeight: 75,
|
||||||
|
maxWidth: 420,
|
||||||
|
minWidth: "100%",
|
||||||
|
}
|
||||||
|
|
||||||
|
const name = hit.name === undefined ?
|
||||||
|
hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title :
|
||||||
|
(hit.name.charAt(0).toUpperCase()+hit.name.slice(1)).replaceAll("_", " ")
|
||||||
|
const secondaryText = hit.description !== undefined && hit.description !== null && hit.description.length > 3 ? hit.description.slice(0, 40)+"..." : ""
|
||||||
|
const appGroup = hit.action_references === undefined || hit.action_references === null ? [] : hit.action_references
|
||||||
|
const avatar = baseImage
|
||||||
|
|
||||||
|
var parsedUrl = isCloud ? `/workflows/${hit.objectID}` : `https://shuffler.io/workflows/${hit.objectID}`
|
||||||
|
parsedUrl += `?queryID=${hit.__queryID}`
|
||||||
|
|
||||||
|
// <a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
|
||||||
|
return (
|
||||||
|
<Link key={hit.objectID} to={{ pathname: parsedUrl }} rel="noopener noreferrer" style={{textDecoration: "none", color: "white",}} onClick={(event) => {
|
||||||
|
//console.log("CLICK")
|
||||||
|
setSearchOpen(true)
|
||||||
|
|
||||||
|
aa('init', {
|
||||||
|
appId: searchClient.appId,
|
||||||
|
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||||
|
})
|
||||||
|
|
||||||
|
const timestamp = new Date().getTime()
|
||||||
|
aa('sendEvents', [
|
||||||
|
{
|
||||||
|
eventType: 'click',
|
||||||
|
eventName: 'Workflow Clicked',
|
||||||
|
index: 'workflows',
|
||||||
|
objectIDs: [hit.objectID],
|
||||||
|
timestamp: timestamp,
|
||||||
|
queryID: hit.__queryID,
|
||||||
|
positions: [hit.__position],
|
||||||
|
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
if (!isCloud) {
|
||||||
|
event.preventDefault()
|
||||||
|
window.open(parsedUrl, '_blank');
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
|
||||||
|
setMouseHoverIndex(index)
|
||||||
|
}}>
|
||||||
|
<ListItemAvatar>
|
||||||
|
{avatar}
|
||||||
|
</ListItemAvatar>
|
||||||
|
<div style={{}}>
|
||||||
|
<ListItemText
|
||||||
|
primary={name}
|
||||||
|
/>
|
||||||
|
<AvatarGroup max={10} style={{flexDirection: "row", padding: 0, margin: 0, itemAlign: "left", textAlign: "left",}}>
|
||||||
|
{appGroup.map((app, index) => {
|
||||||
|
// Putting all this in secondary of ListItemText looked weird.
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
style={{
|
||||||
|
height: 24,
|
||||||
|
width: 24,
|
||||||
|
filter: "brightness(0.6)",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
navigate("/apps/"+app.id)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tooltip color="primary" title={app.name} placement="bottom">
|
||||||
|
<Avatar alt={app.name} src={app.image_url} style={{width: 24, height: 24}}/>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</AvatarGroup>
|
||||||
|
</div>
|
||||||
|
{/*
|
||||||
|
<ListItemSecondaryAction>
|
||||||
|
<IconButton edge="end" aria-label="delete">
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</ListItemSecondaryAction>
|
||||||
|
*/}
|
||||||
|
</ListItem>
|
||||||
|
</Link>
|
||||||
|
)})
|
||||||
|
}
|
||||||
|
</List>
|
||||||
|
{/*
|
||||||
|
<span style={{display: "flex", textAlign: "left", float: "left", position: "absolute", left: 15, bottom: 10, }}>
|
||||||
|
<Link to="/search" style={{textDecoration: "none", color: "#f85a3e"}}>
|
||||||
|
<Typography variant="body2" style={{}}>
|
||||||
|
See all workflows
|
||||||
|
</Typography>
|
||||||
|
</Link>
|
||||||
|
</span>
|
||||||
|
*/}
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const AppHits = ({ hits }) => {
|
||||||
|
const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
|
||||||
|
|
||||||
|
var tmp = searchOpen
|
||||||
|
if (!searchOpen) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const positionInfo = document.activeElement.getBoundingClientRect()
|
||||||
|
const outerlistitemStyle = {
|
||||||
|
width: "100%",
|
||||||
|
overflowX: "hidden",
|
||||||
|
overflowY: "hidden",
|
||||||
|
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hits.length > 4) {
|
||||||
|
hits = hits.slice(0, 4)
|
||||||
|
}
|
||||||
|
|
||||||
|
var type = "app"
|
||||||
|
const baseImage = <LibraryBooksIcon />
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card elevation={0} style={{position: "relative", marginLeft: 10, marginRight: 10, position: "absolute", color: "white", zIndex: 1001, backgroundColor: theme.palette.inputColor, width: 1155, height: 408, left: -305, boxShadows: "none",}}>
|
||||||
|
<IconButton style={{zIndex: 5000, position: "absolute", right: 14, color: "grey"}} onClick={() => {
|
||||||
|
setSearchOpen(false)
|
||||||
|
}}>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="h6" style={{margin: "10px 10px 0px 20px", }}>
|
||||||
|
Apps
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<List style={{backgroundColor: theme.palette.inputColor, }}>
|
||||||
|
{hits.length === 0 ?
|
||||||
|
<ListItem style={outerlistitemStyle}>
|
||||||
|
<ListItemAvatar onClick={() => console.log(hits)}>
|
||||||
|
<Avatar>
|
||||||
|
<FolderIcon />
|
||||||
|
</Avatar>
|
||||||
|
</ListItemAvatar>
|
||||||
|
<ListItemText
|
||||||
|
primary={"No apps found."}
|
||||||
|
secondary={"Try a broader search term"}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
:
|
||||||
|
hits.map((hit, index) => {
|
||||||
|
const innerlistitemStyle = {
|
||||||
|
width: positionInfo.width+35,
|
||||||
|
overflowX: "hidden",
|
||||||
|
overflowY: "hidden",
|
||||||
|
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||||
|
backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
|
||||||
|
cursor: "pointer",
|
||||||
|
marginLeft: 5,
|
||||||
|
marginRight: 5,
|
||||||
|
maxHeight: 75,
|
||||||
|
minHeight: 75,
|
||||||
|
maxWidth: 420,
|
||||||
|
minWidth: "100%",
|
||||||
|
}
|
||||||
|
|
||||||
|
const name = hit.name === undefined ?
|
||||||
|
hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title :
|
||||||
|
(hit.name.charAt(0).toUpperCase()+hit.name.slice(1)).replaceAll("_", " ")
|
||||||
|
|
||||||
|
var secondaryText = hit.data !== undefined ? hit.data.slice(0, 40)+"..." : ""
|
||||||
|
const avatar = hit.image_url === undefined ?
|
||||||
|
baseImage
|
||||||
|
:
|
||||||
|
<Avatar
|
||||||
|
src={hit.image_url}
|
||||||
|
variant="rounded"
|
||||||
|
/>
|
||||||
|
|
||||||
|
//console.log(hit)
|
||||||
|
if (hit.categories !== undefined && hit.categories !== null && hit.categories.length > 0) {
|
||||||
|
secondaryText = hit.categories.slice(0,3).map((data, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
return ", "+data
|
||||||
|
|
||||||
|
/*
|
||||||
|
<Chip
|
||||||
|
key={index}
|
||||||
|
style={chipStyle}
|
||||||
|
label={data}
|
||||||
|
onClick={() => {
|
||||||
|
//handleChipClick
|
||||||
|
}}
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
*/
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
var parsedUrl = isCloud ? `/apps/${hit.objectID}` : `https://shuffler.io/apps/${hit.objectID}`
|
||||||
|
parsedUrl += `?queryID=${hit.__queryID}`
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link key={hit.objectID} to={{ pathname: parsedUrl }} style={{textDecoration: "none", color: "white",}} onClick={(event) => {
|
||||||
|
console.log("CLICK")
|
||||||
|
setSearchOpen(true)
|
||||||
|
|
||||||
|
aa('init', {
|
||||||
|
appId: searchClient.appId,
|
||||||
|
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||||
|
})
|
||||||
|
|
||||||
|
const timestamp = new Date().getTime()
|
||||||
|
aa('sendEvents', [
|
||||||
|
{
|
||||||
|
eventType: 'click',
|
||||||
|
eventName: 'App Clicked',
|
||||||
|
index: 'appsearch',
|
||||||
|
objectIDs: [hit.objectID],
|
||||||
|
timestamp: timestamp,
|
||||||
|
queryID: hit.__queryID,
|
||||||
|
positions: [hit.__position],
|
||||||
|
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
if (!isCloud) {
|
||||||
|
event.preventDefault()
|
||||||
|
window.open(parsedUrl, '_blank');
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
|
||||||
|
setMouseHoverIndex(index)
|
||||||
|
}}>
|
||||||
|
<ListItemAvatar>
|
||||||
|
{avatar}
|
||||||
|
</ListItemAvatar>
|
||||||
|
<ListItemText
|
||||||
|
primary={name}
|
||||||
|
secondary={secondaryText}
|
||||||
|
/>
|
||||||
|
{/*
|
||||||
|
<ListItemSecondaryAction>
|
||||||
|
<IconButton edge="end" aria-label="delete">
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</ListItemSecondaryAction>
|
||||||
|
*/}
|
||||||
|
</ListItem>
|
||||||
|
</Link>
|
||||||
|
)})
|
||||||
|
}
|
||||||
|
</List>
|
||||||
|
<span style={{display: "flex", textAlign: "left", float: "left", position: "absolute", left: 15, bottom: 10, }}>
|
||||||
|
<Link to="/search" style={{textDecoration: "none", color: "#f85a3e"}}>
|
||||||
|
<Typography variant="body1" style={{}}>
|
||||||
|
See more
|
||||||
|
</Typography>
|
||||||
|
</Link>
|
||||||
|
</span>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const DocHits = ({ hits }) => {
|
||||||
|
const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
|
||||||
|
|
||||||
|
var tmp = searchOpen
|
||||||
|
if (!searchOpen) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const positionInfo = document.activeElement.getBoundingClientRect()
|
||||||
|
const outerlistitemStyle = {
|
||||||
|
width: "100%",
|
||||||
|
overflowX: "hidden",
|
||||||
|
overflowY: "hidden",
|
||||||
|
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hits.length > 4) {
|
||||||
|
hits = hits.slice(0, 4)
|
||||||
|
}
|
||||||
|
|
||||||
|
const type = "documentation"
|
||||||
|
const baseImage = <LibraryBooksIcon />
|
||||||
|
|
||||||
|
//console.log(type, hits.length, hits)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card elevation={0} style={{position: "relative", marginLeft: 10, marginRight: 10, position: "absolute", color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: 405, height: 408, left: 470, boxShadows: "none",}}>
|
||||||
|
<IconButton style={{zIndex: 5000, position: "absolute", right: 14, color: "grey"}} onClick={() => {
|
||||||
|
setSearchOpen(false)
|
||||||
|
}}>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="h6" style={{margin: "10px 10px 0px 20px", }}>
|
||||||
|
Documentation
|
||||||
|
</Typography>
|
||||||
|
{/*
|
||||||
|
<IconButton edge="end" aria-label="delete" style={{position: "absolute", top: 5, right: 15,}} onClick={() => {
|
||||||
|
setSearchOpen(false)
|
||||||
|
}}>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
*/}
|
||||||
|
<List style={{backgroundColor: theme.palette.inputColor, }}>
|
||||||
|
{hits.length === 0 ?
|
||||||
|
<ListItem style={outerlistitemStyle}>
|
||||||
|
<ListItemAvatar onClick={() => console.log(hits)}>
|
||||||
|
<Avatar>
|
||||||
|
<FolderIcon />
|
||||||
|
</Avatar>
|
||||||
|
</ListItemAvatar>
|
||||||
|
<ListItemText
|
||||||
|
primary={"No documentation."}
|
||||||
|
secondary={"Try a broader search term"}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
:
|
||||||
|
hits.map((hit, index) => {
|
||||||
|
const innerlistitemStyle = {
|
||||||
|
width: positionInfo.width+35,
|
||||||
|
overflowX: "hidden",
|
||||||
|
overflowY: "hidden",
|
||||||
|
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||||
|
backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
|
||||||
|
cursor: "pointer",
|
||||||
|
marginLeft: 5,
|
||||||
|
marginRight: 5,
|
||||||
|
maxHeight: 75,
|
||||||
|
minHeight: 75,
|
||||||
|
maxWidth: 420,
|
||||||
|
minWidth: "100%",
|
||||||
|
}
|
||||||
|
|
||||||
|
var name = hit.name === undefined ?
|
||||||
|
hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title
|
||||||
|
:
|
||||||
|
(hit.name.charAt(0).toUpperCase()+hit.name.slice(1)).replaceAll("_", " ")
|
||||||
|
|
||||||
|
if (name.length > 30) {
|
||||||
|
name = name.slice(0, 30)+"..."
|
||||||
|
}
|
||||||
|
const secondaryText = hit.data !== undefined ? hit.data.slice(0, 40)+"..." : ""
|
||||||
|
const avatar = hit.image_url === undefined ?
|
||||||
|
baseImage
|
||||||
|
:
|
||||||
|
<Avatar
|
||||||
|
src={hit.image_url}
|
||||||
|
variant="rounded"
|
||||||
|
/>
|
||||||
|
|
||||||
|
var parsedUrl = hit.urlpath !== undefined ? hit.urlpath : ""
|
||||||
|
parsedUrl += `?queryID=${hit.__queryID}`
|
||||||
|
if (parsedUrl.includes("/apps/")) {
|
||||||
|
const extraHash = hit.url_hash === undefined ? "" : `#${hit.url_hash}`
|
||||||
|
|
||||||
|
parsedUrl = `/apps/${hit.filename}?tab=docs&queryID=${hit.__queryID}${extraHash}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link key={hit.objectID} to={parsedUrl} style={{textDecoration: "none", color: "white",}} onClick={(event) => {
|
||||||
|
aa('init', {
|
||||||
|
appId: searchClient.appId,
|
||||||
|
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||||
|
})
|
||||||
|
|
||||||
|
const timestamp = new Date().getTime()
|
||||||
|
aa('sendEvents', [
|
||||||
|
{
|
||||||
|
eventType: 'click',
|
||||||
|
eventName: 'Document Clicked',
|
||||||
|
index: 'documentation',
|
||||||
|
objectIDs: [hit.objectID],
|
||||||
|
timestamp: timestamp,
|
||||||
|
queryID: hit.__queryID,
|
||||||
|
positions: [hit.__position],
|
||||||
|
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
console.log("CLICK")
|
||||||
|
setSearchOpen(true)
|
||||||
|
}}>
|
||||||
|
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
|
||||||
|
setMouseHoverIndex(index)
|
||||||
|
}}>
|
||||||
|
<ListItemAvatar>
|
||||||
|
{avatar}
|
||||||
|
</ListItemAvatar>
|
||||||
|
<ListItemText
|
||||||
|
primary={name}
|
||||||
|
secondary={secondaryText}
|
||||||
|
/>
|
||||||
|
{/*
|
||||||
|
<ListItemSecondaryAction>
|
||||||
|
<IconButton edge="end" aria-label="delete">
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</ListItemSecondaryAction>
|
||||||
|
*/}
|
||||||
|
</ListItem>
|
||||||
|
</Link>
|
||||||
|
)})
|
||||||
|
}
|
||||||
|
</List>
|
||||||
|
{type === "documentation" ?
|
||||||
|
<span style={{display: "flex", textAlign: "right", position: "absolute", right: 15, bottom: 10,}}>
|
||||||
|
<Typography variant="body2" style={{}}>
|
||||||
|
Search by
|
||||||
|
</Typography>
|
||||||
|
<a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
|
||||||
|
<img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{height: 17, marginLeft: 5, marginTop: 3,}} />
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
: null}
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const CustomSearchBox = connectSearchBox(SearchBox)
|
||||||
|
const CustomAppHits = connectHits(AppHits)
|
||||||
|
const CustomWorkflowHits = connectHits(WorkflowHits)
|
||||||
|
const CustomDocHits = connectHits(DocHits)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={node} style={{width: "100%", maxWidth: 425, margin: "auto", position: "relative", }}>
|
||||||
|
<InstantSearch searchClient={searchClient} indexName="appsearch" onClick={() => {
|
||||||
|
console.log("CLICKED")
|
||||||
|
}}>
|
||||||
|
<Configure clickAnalytics />
|
||||||
|
<CustomSearchBox />
|
||||||
|
<Index indexName="appsearch">
|
||||||
|
<CustomAppHits />
|
||||||
|
</Index>
|
||||||
|
<Index indexName="documentation">
|
||||||
|
<CustomDocHits />
|
||||||
|
</Index>
|
||||||
|
<Index indexName="workflows">
|
||||||
|
<CustomWorkflowHits />
|
||||||
|
</Index>
|
||||||
|
</InstantSearch>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SearchField;
|
||||||
@@ -0,0 +1,252 @@
|
|||||||
|
import React, {useState } from 'react';
|
||||||
|
import {isMobile} from "react-device-detect";
|
||||||
|
import AppFramework, { usecases } from "../components/AppFramework.jsx";
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
import ReactGA from 'react-ga4';
|
||||||
|
|
||||||
|
import { Button, LinearProgress, Typography } from '@material-ui/core';
|
||||||
|
|
||||||
|
export const securityFramework = [
|
||||||
|
{
|
||||||
|
image: <path d="M15.6408 8.39233H18.0922V10.0287H15.6408V8.39233ZM0.115234 8.39233H2.56663V10.0287H0.115234V8.39233ZM9.92083 0.21051V2.66506H8.28656V0.21051H9.92083ZM3.31839 2.25596L5.05889 4.00687L3.89856 5.16051L2.15807 3.42596L3.31839 2.25596ZM13.1485 3.99869L14.8808 2.25596L16.0493 3.42596L14.3088 5.16051L13.1485 3.99869ZM9.10369 4.30142C10.404 4.30142 11.651 4.81863 12.5705 5.73926C13.4899 6.65989 14.0065 7.90854 14.0065 9.21051C14.0065 11.0269 13.0178 12.6141 11.5551 13.4651V14.9378C11.5551 15.1548 11.469 15.3629 11.3158 15.5163C11.1625 15.6698 10.9547 15.756 10.738 15.756H7.46943C7.25271 15.756 7.04487 15.6698 6.89163 15.5163C6.73839 15.3629 6.6523 15.1548 6.6523 14.9378V13.4651C5.18963 12.6141 4.2009 11.0269 4.2009 9.21051C4.2009 7.90854 4.71744 6.65989 5.63689 5.73926C6.55635 4.81863 7.80339 4.30142 9.10369 4.30142ZM10.738 16.5741V17.3923C10.738 17.6093 10.6519 17.8174 10.4986 17.9709C10.3454 18.1243 10.1375 18.2105 9.92083 18.2105H8.28656C8.06984 18.2105 7.862 18.1243 7.70876 17.9709C7.55552 17.8174 7.46943 17.6093 7.46943 17.3923V16.5741H10.738ZM8.28656 14.1196H9.92083V12.3769C11.3345 12.0169 12.3722 10.7323 12.3722 9.21051C12.3722 8.34253 12.0279 7.5101 11.4149 6.89634C10.8019 6.28259 9.97056 5.93778 9.10369 5.93778C8.23683 5.93778 7.40546 6.28259 6.79249 6.89634C6.17953 7.5101 5.83516 8.34253 5.83516 9.21051C5.83516 10.7323 6.87292 12.0169 8.28656 12.3769V14.1196Z" />,
|
||||||
|
text: "Cases",
|
||||||
|
description: "Case management"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image:
|
||||||
|
<path d="M6.93767 0C8.71083 0 10.4114 0.704386 11.6652 1.9582C12.919 3.21202 13.6234 4.91255 13.6234 6.68571C13.6234 8.34171 13.0165 9.864 12.0188 11.0366L12.2965 11.3143H13.1091L18.252 16.4571L16.7091 18L11.5662 12.8571V12.0446L11.2885 11.7669C10.116 12.7646 8.59367 13.3714 6.93767 13.3714C5.16451 13.3714 3.46397 12.667 2.21015 11.4132C0.956339 10.1594 0.251953 8.45888 0.251953 6.68571C0.251953 4.91255 0.956339 3.21202 2.21015 1.9582C3.46397 0.704386 5.16451 0 6.93767 0ZM6.93767 2.05714C4.36624 2.05714 2.3091 4.11429 2.3091 6.68571C2.3091 9.25714 4.36624 11.3143 6.93767 11.3143C9.5091 11.3143 11.5662 9.25714 11.5662 6.68571C11.5662 4.11429 9.5091 2.05714 6.93767 2.05714Z" />,
|
||||||
|
text: "SIEM",
|
||||||
|
description: "Case management"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image:
|
||||||
|
<path d="M11.223 10.971L3.85195 14.4L7.28095 7.029L14.652 3.6L11.223 10.971ZM9.25195 0C8.07006 0 6.89973 0.232792 5.8078 0.685084C4.71587 1.13738 3.72372 1.80031 2.88799 2.63604C1.20016 4.32387 0.251953 6.61305 0.251953 9C0.251953 11.3869 1.20016 13.6761 2.88799 15.364C3.72372 16.1997 4.71587 16.8626 5.8078 17.3149C6.89973 17.7672 8.07006 18 9.25195 18C11.6389 18 13.9281 17.0518 15.6159 15.364C17.3037 13.6761 18.252 11.3869 18.252 9C18.252 7.8181 18.0192 6.64778 17.5669 5.55585C17.1146 4.46392 16.4516 3.47177 15.6159 2.63604C14.7802 1.80031 13.788 1.13738 12.6961 0.685084C11.6042 0.232792 10.4338 0 9.25195 0ZM9.25195 8.01C8.98939 8.01 8.73758 8.1143 8.55192 8.29996C8.36626 8.48563 8.26195 8.73744 8.26195 9C8.26195 9.26256 8.36626 9.51437 8.55192 9.70004C8.73758 9.8857 8.98939 9.99 9.25195 9.99C9.51452 9.99 9.76633 9.8857 9.95199 9.70004C10.1376 9.51437 10.242 9.26256 10.242 9C10.242 8.73744 10.1376 8.48563 9.95199 8.29996C9.76633 8.1143 9.51452 8.01 9.25195 8.01Z" />,
|
||||||
|
text: "Assets",
|
||||||
|
description: "Case management"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image:
|
||||||
|
<path d="M13.3318 2.223C13.2598 2.223 13.1878 2.205 13.1248 2.169C11.3968 1.278 9.90284 0.9 8.11184 0.9C6.32984 0.9 4.63784 1.323 3.09884 2.169C2.88284 2.286 2.61284 2.205 2.48684 1.989C2.36984 1.773 2.45084 1.494 2.66684 1.377C4.34084 0.468 6.17684 0 8.11184 0C10.0288 0 11.7028 0.423 13.5388 1.368C13.7638 1.485 13.8448 1.755 13.7278 1.971C13.6468 2.133 13.4938 2.223 13.3318 2.223ZM0.452843 6.948C0.362843 6.948 0.272843 6.921 0.191843 6.867C-0.015157 6.723 -0.0601571 6.444 0.0838429 6.237C0.974843 4.977 2.10884 3.987 3.45884 3.294C6.28484 1.836 9.90284 1.827 12.7378 3.285C14.0878 3.978 15.2218 4.959 16.1128 6.21C16.2568 6.408 16.2118 6.696 16.0048 6.84C15.7978 6.984 15.5188 6.939 15.3748 6.732C14.5648 5.598 13.5388 4.707 12.3238 4.086C9.74084 2.763 6.43784 2.763 3.86384 4.095C2.63984 4.725 1.61384 5.625 0.803843 6.759C0.731843 6.885 0.596843 6.948 0.452843 6.948ZM6.07784 17.811C5.96084 17.811 5.84384 17.766 5.76284 17.676C4.97984 16.893 4.55684 16.389 3.95384 15.3C3.33284 14.193 3.00884 12.843 3.00884 11.394C3.00884 8.721 5.29484 6.543 8.10284 6.543C10.9108 6.543 13.1968 8.721 13.1968 11.394C13.1968 11.646 12.9988 11.844 12.7468 11.844C12.4948 11.844 12.2968 11.646 12.2968 11.394C12.2968 9.216 10.4158 7.443 8.10284 7.443C5.78984 7.443 3.90884 9.216 3.90884 11.394C3.90884 12.69 4.19684 13.887 4.74584 14.859C5.32184 15.894 5.71784 16.335 6.41084 17.037C6.58184 17.217 6.58184 17.496 6.41084 17.676C6.31184 17.766 6.19484 17.811 6.07784 17.811ZM12.5308 16.146C11.4598 16.146 10.5148 15.876 9.74084 15.345C8.39984 14.436 7.59884 12.96 7.59884 11.394C7.59884 11.142 7.79684 10.944 8.04884 10.944C8.30084 10.944 8.49884 11.142 8.49884 11.394C8.49884 12.663 9.14684 13.86 10.2448 14.598C10.8838 15.03 11.6308 15.237 12.5308 15.237C12.7468 15.237 13.1068 15.21 13.4668 15.147C13.7098 15.102 13.9438 15.264 13.9888 15.516C14.0338 15.759 13.8718 15.993 13.6198 16.038C13.1068 16.137 12.6568 16.146 12.5308 16.146ZM10.7218 18C10.6858 18 10.6408 17.991 10.6048 17.982C9.17384 17.586 8.23784 17.055 7.25684 16.092C5.99684 14.841 5.30384 13.176 5.30384 11.394C5.30384 9.936 6.54584 8.748 8.07584 8.748C9.60584 8.748 10.8478 9.936 10.8478 11.394C10.8478 12.357 11.6848 13.14 12.7198 13.14C13.7548 13.14 14.5918 12.357 14.5918 11.394C14.5918 8.001 11.6668 5.247 8.06684 5.247C5.51084 5.247 3.17084 6.669 2.11784 8.874C1.76684 9.603 1.58684 10.458 1.58684 11.394C1.58684 12.096 1.64984 13.203 2.18984 14.643C2.27984 14.877 2.16284 15.138 1.92884 15.219C1.69484 15.309 1.43384 15.183 1.35284 14.958C0.911843 13.779 0.695843 12.609 0.695843 11.394C0.695843 10.314 0.902843 9.333 1.30784 8.478C2.50484 5.967 5.15984 4.338 8.06684 4.338C12.1618 4.338 15.4918 7.497 15.4918 11.385C15.4918 12.843 14.2498 14.031 12.7198 14.031C11.1898 14.031 9.94784 12.843 9.94784 11.385C9.94784 10.422 9.11084 9.639 8.07584 9.639C7.04084 9.639 6.20384 10.422 6.20384 11.385C6.20384 12.924 6.79784 14.364 7.88684 15.444C8.74184 16.29 9.56084 16.758 10.8298 17.109C11.0728 17.172 11.2078 17.424 11.1448 17.658C11.0998 17.865 10.9108 18 10.7218 18Z" />,
|
||||||
|
text: "IAM",
|
||||||
|
description: "Case management"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: <path d="M16.1091 8.57143H14.8234V5.14286C14.8234 4.19143 14.052 3.42857 13.1091 3.42857H9.68052V2.14286C9.68052 1.57454 9.45476 1.02949 9.0529 0.627628C8.65103 0.225765 8.10599 0 7.53767 0C6.96935 0 6.4243 0.225765 6.02244 0.627628C5.62057 1.02949 5.39481 1.57454 5.39481 2.14286V3.42857H1.96624C1.51158 3.42857 1.07555 3.60918 0.754056 3.93067C0.432565 4.25216 0.251953 4.6882 0.251953 5.14286V8.4H1.53767C2.82338 8.4 3.85195 9.42857 3.85195 10.7143C3.85195 12 2.82338 13.0286 1.53767 13.0286H0.251953V16.2857C0.251953 16.7404 0.432565 17.1764 0.754056 17.4979C1.07555 17.8194 1.51158 18 1.96624 18H5.22338V16.7143C5.22338 15.4286 6.25195 14.4 7.53767 14.4C8.82338 14.4 9.85195 15.4286 9.85195 16.7143V18H13.1091C13.5638 18 13.9998 17.8194 14.3213 17.4979C14.6428 17.1764 14.8234 16.7404 14.8234 16.2857V12.8571H16.1091C16.6774 12.8571 17.2225 12.6314 17.6243 12.2295C18.0262 11.8277 18.252 11.2826 18.252 10.7143C18.252 10.146 18.0262 9.60092 17.6243 9.19906C17.2225 8.79719 16.6774 8.57143 16.1091 8.57143Z" />,
|
||||||
|
text: "Intel",
|
||||||
|
description: "Case management"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image:
|
||||||
|
<path d="M9.89516 7.71433H8.60945V5.1429H9.89516V7.71433ZM9.89516 10.2858H8.60945V9.00004H9.89516V10.2858ZM14.3952 2.57147H4.10944C3.76845 2.57147 3.44143 2.70693 3.20031 2.94805C2.95919 3.18917 2.82373 3.51619 2.82373 3.85719V15.4286L5.39516 12.8572H14.3952C14.7362 12.8572 15.0632 12.7217 15.3043 12.4806C15.5454 12.2395 15.6809 11.9125 15.6809 11.5715V3.85719C15.6809 3.14361 15.1023 2.57147 14.3952 2.57147Z" />,
|
||||||
|
text: "Comms",
|
||||||
|
description: "Case management"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image:
|
||||||
|
<path d="M0.251953 10.6011H3.8391L9.38052 -4.92572e-08L10.8977 11.5696L15.0377 6.28838L19.3191 10.6011H23.3948V13.1836H18.252L15.2562 10.175L9.1491 18L7.88909 8.41894L5.39481 13.1836H0.251953V10.6011Z" />,
|
||||||
|
text: "Network",
|
||||||
|
description: "Case management"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image:
|
||||||
|
<path d="M19.1722 8.9957L17.0737 6.60487L17.3661 3.44004L14.2615 2.73483L12.6361 -3.28068e-08L9.71206 1.25561L6.78803 -3.28068e-08L5.16261 2.73483L2.05797 3.43144L2.35038 6.59627L0.251953 8.9957L2.35038 11.3865L2.05797 14.56L5.16261 15.2652L6.78803 18L9.71206 16.7358L12.6361 17.9914L14.2615 15.2566L17.3661 14.5514L17.0737 11.3865L19.1722 8.9957ZM10.5721 13.2957H8.85205V11.5757H10.5721V13.2957ZM10.5721 9.85571H8.85205V4.69565H10.5721V9.85571Z" />,
|
||||||
|
text: "EDR & AV",
|
||||||
|
description: "Case management"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const LandingpageUsecases = (props) => {
|
||||||
|
const { userdata } = props
|
||||||
|
|
||||||
|
const [selectedUsecase, setSelectedUsecase] = useState("Phishing")
|
||||||
|
const usecasekeys = usecases === undefined || usecases === null ? [] : Object.keys(usecases)
|
||||||
|
const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)"
|
||||||
|
const buttonStyle = {borderRadius: 25, height: 50, width: 260, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18, backgroundImage: buttonBackground}
|
||||||
|
|
||||||
|
const HandleTitle = (props) => {
|
||||||
|
const { usecases, selectedUsecase, setSelecedUsecase } = props
|
||||||
|
const [progress, setProgress] = useState(0)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
setProgress((oldProgress) => {
|
||||||
|
if (oldProgress >= 105) {
|
||||||
|
const foundIndex = usecasekeys.findIndex(key => key === selectedUsecase)
|
||||||
|
var newitem = usecasekeys[foundIndex+1]
|
||||||
|
if (newitem === undefined || newitem === 0) {
|
||||||
|
newitem = usecasekeys[1]
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedUsecase(newitem)
|
||||||
|
return -18
|
||||||
|
}
|
||||||
|
|
||||||
|
if (oldProgress >= 65) {
|
||||||
|
return oldProgress + 3
|
||||||
|
}
|
||||||
|
|
||||||
|
if (oldProgress >= 80) {
|
||||||
|
return oldProgress + 1
|
||||||
|
}
|
||||||
|
|
||||||
|
return oldProgress + 6
|
||||||
|
})
|
||||||
|
}, 165)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(timer)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
if (usecases === null || usecases === undefined || usecases.length === 0) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const modifier = isMobile ? 17 : 22
|
||||||
|
return (
|
||||||
|
<span style={{margin: "auto", textAlign: isMobile ? "center" : "left", width: isMobile ? 280 : "100%",}}>
|
||||||
|
<b>Handle <br/>
|
||||||
|
<span style={{marginBottom: 10}}>
|
||||||
|
<i id="usecase-text">{selectedUsecase}</i>
|
||||||
|
<LinearProgress variant="determinate" value={progress} style={{marginTop: 0, marginBottom: 0, height: 3, width: isMobile ? "100%" : selectedUsecase.length*modifier, borderRadius: 10, }} />
|
||||||
|
</span>
|
||||||
|
with confidence</b>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedWidth = isMobile ? "100%" : 1100
|
||||||
|
return (
|
||||||
|
<div style={{width: isMobile ? null : parsedWidth, margin: isMobile ? "0px 0px 0px 0px" : "auto", color: "white", textAlign: isMobile ? "center" : "left",}}>
|
||||||
|
<div style={{display: "flex", position: "relative",}}>
|
||||||
|
<div style={{maxWidth: isMobile ? "100%" : 420, paddingTop: isMobile ? 0 : 120, zIndex: 1000, margin: "auto",}}>
|
||||||
|
|
||||||
|
<Typography variant="h1" style={{margin: "auto", width: isMobile ? 280 : "100%", marginTop: isMobile ? 50 : 0}}>
|
||||||
|
<HandleTitle usecases={usecases} selectedUsecase={selectedUsecase} setSelectedUsecase={setSelectedUsecase} />
|
||||||
|
|
||||||
|
{/*<b>Security Automation <i>is Hard</i></b>*/}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="h6" style={{marginTop: isMobile ? 15 : 0,}}>
|
||||||
|
Connecting your everchanging environment is hard. We get it! That's why we built Shuffle, where you can use and share your security workflows to everyones benefit.
|
||||||
|
{/*Shuffle is an automation platform where you don't need to be an expert to automate. Get access to our large pool of security playbooks, apps and people.*/}
|
||||||
|
</Typography>
|
||||||
|
<div style={{display: "flex", textAlign: "center", itemAlign: "center",}}>
|
||||||
|
{isMobile ? null :
|
||||||
|
<Link rel="noopener noreferrer" to={"/pricing"} style={{textDecoration: "none"}}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "landingpage",
|
||||||
|
action: "click_main_pricing",
|
||||||
|
label: "",
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
borderRadius: 25, height: 40, width: 175, margin: "15px 0px 15px 0px", fontSize: 14, color: "white", backgroundImage: buttonBackground, marginRight: 10,
|
||||||
|
}}>
|
||||||
|
See Pricing
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
}
|
||||||
|
{isMobile ? null :
|
||||||
|
<Link rel="noopener noreferrer" to={"/register?message=You'll need to sign up first. No name, company or credit card required."} style={{textDecoration: "none"}}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "landingpage",
|
||||||
|
action: "click_main_try_it_out",
|
||||||
|
label: "",
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
borderRadius: 25, height: 40, width: 175, margin: "15px 0px 15px 0px", fontSize: 14, color: "white", backgroundImage: buttonBackground,
|
||||||
|
}}>
|
||||||
|
Start for free
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{isMobile ? null :
|
||||||
|
<div style={{marginLeft: 200, marginTop: 125, zIndex: 1000}}>
|
||||||
|
<AppFramework
|
||||||
|
userdata={userdata}
|
||||||
|
showOptions={false}
|
||||||
|
selectedOption={selectedUsecase}
|
||||||
|
rolling={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
{isMobile ? null :
|
||||||
|
<div style={{position: "absolute", top: 50, right: -200, zIndex: 0, }}>
|
||||||
|
<svg width="351" height="433" viewBox="0 0 351 433" fill="none" xmlns="http://www.w3.org/2000/svg" style={{zIndex: 0, }}>
|
||||||
|
<path d="M167.781 184.839C167.781 235.244 208.625 276.104 259.03 276.104C309.421 276.104 350.28 235.244 350.28 184.839C350.28 134.448 309.421 93.5892 259.03 93.5892C208.625 93.5741 167.781 134.433 167.781 184.839ZM330.387 184.839C330.387 224.263 298.439 256.195 259.03 256.195C219.621 256.195 187.674 224.248 187.674 184.839C187.674 145.43 219.636 113.483 259.03 113.483C298.439 113.483 330.387 145.43 330.387 184.839Z" fill="white" fill-opacity="0.2"/>
|
||||||
|
<path d="M167.781 387.368C167.781 412.578 188.203 433 213.398 433C238.593 433 259.03 412.578 259.03 387.368C259.03 362.157 238.608 341.735 213.398 341.735C188.187 341.735 167.781 362.172 167.781 387.368ZM249.076 387.368C249.076 407.08 233.095 423.046 213.398 423.046C193.686 423.046 177.72 407.065 177.72 387.368C177.72 367.671 193.686 351.69 213.398 351.69C233.095 351.705 249.076 367.671 249.076 387.368Z" fill="white" fill-opacity="0.2"/>
|
||||||
|
<path d="M56.8637 0.738726C25.7052 0.738724 0.44632 25.9976 0.446317 57.1561C0.446314 88.3146 25.7052 113.573 56.8637 113.573C88.0221 113.573 113.281 88.3146 113.281 57.1561C113.281 25.9977 88.0222 0.738729 56.8637 0.738726Z" fill="white" fill-opacity="0.2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div style={{display: "flex", width: isMobile ? "100%" : 300, itemAlign: "center", margin: "auto", marginTop: 20, flexDirection: isMobile ? "column" : "row", textAlign: "center",}}>
|
||||||
|
{isMobile ?
|
||||||
|
<Link rel="noopener noreferrer" to={"/pricing"} style={{textDecoration: "none"}}>
|
||||||
|
<Button
|
||||||
|
variant={isMobile ? "contained" : "outlined"}
|
||||||
|
color={isMobile ? "primary" : "secondary"}
|
||||||
|
style={buttonStyle}
|
||||||
|
onClick={() => {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "landingpage",
|
||||||
|
action: "click_main_pricing",
|
||||||
|
label: "",
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
See pricing
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
{/*isMobile ?
|
||||||
|
<Link rel="noopener noreferrer" to={"/docs/features"} style={{textDecoration: "none"}}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={() => {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "landingpage",
|
||||||
|
action: "click_main_features",
|
||||||
|
label: "",
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
color="secondary"
|
||||||
|
style={buttonStyle}>
|
||||||
|
Features
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
: null*/}
|
||||||
|
</div>
|
||||||
|
{isMobile ? null :
|
||||||
|
<div style={{display: "flex", width: parsedWidth, margin: "auto", marginTop: 150}}>
|
||||||
|
{securityFramework.map((data, index) => {
|
||||||
|
return (
|
||||||
|
<div key={index} style={{flex: 1, textAlign: "center",}}>
|
||||||
|
<span style={{margin: "auto", width: 25,}}>
|
||||||
|
<svg width="25" height="25" fill="white" xmlns="http://www.w3.org/2000/svg" >
|
||||||
|
{data.image}
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<Typography variant="body2" style={{color: "white", marginRight: 5}}>
|
||||||
|
{data.text}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LandingpageUsecases;
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,233 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import ReactGA from 'react-ga4';
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
import PaperComponent from "../components/PaperComponent.jsx"
|
||||||
|
import UsecaseSearch, { usecaseTypes } from "../components/UsecaseSearch.jsx"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Paper,
|
||||||
|
Typography,
|
||||||
|
Divider,
|
||||||
|
IconButton,
|
||||||
|
Badge,
|
||||||
|
CircularProgress,
|
||||||
|
Tooltip,
|
||||||
|
Dialog,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Close as CloseIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
AutoFixHigh as AutoFixHighIcon,
|
||||||
|
Done as DoneIcon,
|
||||||
|
} from "@mui/icons-material";
|
||||||
|
|
||||||
|
const SuggestedWorkflows = (props) => {
|
||||||
|
const { globalUrl, userdata, usecaseSuggestions, frameworkData, setUsecaseSuggestions, inputSearch, apps, } = props
|
||||||
|
|
||||||
|
const [usecaseSearch, setUsecaseSearch] = React.useState("")
|
||||||
|
const [usecaseSearchType, setUsecaseSearchType] = React.useState("")
|
||||||
|
const [finishedUsecases, setFinishedUsecases] = React.useState([])
|
||||||
|
const [previousUsecase, setPreviousUsecase] = React.useState("")
|
||||||
|
const [closeWindow, setCloseWindow] = React.useState(false)
|
||||||
|
|
||||||
|
const isCloud =
|
||||||
|
window.location.host === "localhost:3002" ||
|
||||||
|
window.location.host === "shuffler.io";
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (closeWindow === true) {
|
||||||
|
console.log("WINDOW CLOSED")
|
||||||
|
finishedUsecases.push(usecaseSearch)
|
||||||
|
setFinishedUsecases(finishedUsecases)
|
||||||
|
|
||||||
|
setCloseWindow(false)
|
||||||
|
}
|
||||||
|
}, [closeWindow])
|
||||||
|
|
||||||
|
if (usecaseSuggestions === undefined || usecaseSuggestions.length === 0) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
if (inputSearch !== previousUsecase) {
|
||||||
|
setPreviousUsecase(inputSearch)
|
||||||
|
setFinishedUsecases([])
|
||||||
|
}
|
||||||
|
|
||||||
|
if (finishedUsecases.length === usecaseSuggestions.length) {
|
||||||
|
console.log("Closing finished usecases 2")
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//useEffect(() => {
|
||||||
|
// //if (defaultSearch ===
|
||||||
|
// //setFinishedUsecases(finishedUsecases)
|
||||||
|
// console.log("Finished default usecase?", usecaseSearch)
|
||||||
|
//}, [usecaseSearch])
|
||||||
|
|
||||||
|
const foundZindex = usecaseSearch.length > 0 && usecaseSearchType.length > 0 ? -1 : 12500
|
||||||
|
|
||||||
|
const IndividualUsecase = (props) => {
|
||||||
|
const { usecase, index } = props
|
||||||
|
const [hovering, setHovering] = React.useState(false)
|
||||||
|
|
||||||
|
const usecasename = usecase.name
|
||||||
|
const bordercolor = usecase.color !== undefined ? usecase.color : "rgba(255,255,255,0.3)"
|
||||||
|
|
||||||
|
|
||||||
|
const srcimage = usecase.items[0].app
|
||||||
|
var dstimage = usecase.items[1].app
|
||||||
|
if (usecase.items.length > 2) {
|
||||||
|
dstimage = usecase.items[2].app
|
||||||
|
}
|
||||||
|
|
||||||
|
if (srcimage === undefined || dstimage === undefined) {
|
||||||
|
console.log("Error in src or dst: returning!")
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const finished = finishedUsecases.includes(usecasename)
|
||||||
|
const selectedIcon = finished ? <DoneIcon /> : <AutoFixHighIcon />
|
||||||
|
|
||||||
|
if (finished) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simple visual of the usecase
|
||||||
|
return (
|
||||||
|
<Tooltip
|
||||||
|
title={`Try usecase "${usecasename}"`}
|
||||||
|
placement="top"
|
||||||
|
style={{ zIndex: 10011 }}
|
||||||
|
>
|
||||||
|
<div key={index} style={{cursor: finished ? "auto" : "pointer", marginTop: 10, padding: 10, borderRadius: theme.palette.borderRadius, border: `1px solid ${bordercolor}`, display: "flex", backgroundColor: hovering === true ? theme.palette.inputColor : theme.palette.surfaceColor, }} onMouseOver={() => {
|
||||||
|
setHovering(true)
|
||||||
|
}} onMouseOut={() => {
|
||||||
|
setHovering(false)
|
||||||
|
}} onClick={() => {
|
||||||
|
if (isCloud) {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "welcome",
|
||||||
|
action: "click_suggested_workflow",
|
||||||
|
label: usecasename,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Try usecase ", usecasename)
|
||||||
|
setUsecaseSearchType(usecase.type)
|
||||||
|
setUsecaseSearch(usecasename)
|
||||||
|
|
||||||
|
}}>
|
||||||
|
<div style={{flex: 10}}>
|
||||||
|
<Typography variant="body2">
|
||||||
|
{usecasename}
|
||||||
|
</Typography>
|
||||||
|
<div style={{display: "flex", marginTop: 5, }}>
|
||||||
|
<img alt={srcimage.large_image} src={srcimage.large_image} style={{borderRadius: 20, height: 30, width: 30, marginRight: 15, }}/>
|
||||||
|
<img alt={dstimage.large_image} src={dstimage.large_image} style={{borderRadius: 20, height: 30, width: 30, }}/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style={{flex: 1}}>
|
||||||
|
{selectedIcon}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
//<Paper style={{width: 275, maxHeight: 400, overflow: "hidden", zIndex: 12500, padding: 25, paddingRight: 35, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.2)", position: "absolute", top: -50, left: 50, }}>
|
||||||
|
return (
|
||||||
|
<Paper style={{margin: "auto", position: "relative", backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette.borderRadius, zIndex: foundZindex, border: "1px solid rgba(255,255,255,0.2)", top: 100, left: 85,}}>
|
||||||
|
<Dialog
|
||||||
|
open={usecaseSearch.length > 0 && usecaseSearchType.length > 0}
|
||||||
|
onClose={() => {
|
||||||
|
finishedUsecases.push(usecaseSearch)
|
||||||
|
setFinishedUsecases(finishedUsecases)
|
||||||
|
|
||||||
|
setUsecaseSearch("")
|
||||||
|
setUsecaseSearchType("")
|
||||||
|
}}
|
||||||
|
PaperProps={{
|
||||||
|
style: {
|
||||||
|
pointerEvents: "auto",
|
||||||
|
backgroundColor: theme.palette.surfaceColor,
|
||||||
|
color: "white",
|
||||||
|
minWidth: 450,
|
||||||
|
padding: 50,
|
||||||
|
overflow: "hidden",
|
||||||
|
zIndex: 10050,
|
||||||
|
border: theme.palette.defaultBorder,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
style={{
|
||||||
|
zIndex: 5000,
|
||||||
|
position: "absolute",
|
||||||
|
top: 14,
|
||||||
|
right: 18,
|
||||||
|
color: "grey",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
finishedUsecases.push(usecaseSearch)
|
||||||
|
setFinishedUsecases(finishedUsecases)
|
||||||
|
|
||||||
|
setUsecaseSearch("")
|
||||||
|
setUsecaseSearchType("")
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
<UsecaseSearch
|
||||||
|
globalUrl={globalUrl}
|
||||||
|
defaultSearch={usecaseSearchType}
|
||||||
|
usecaseSearch={usecaseSearch}
|
||||||
|
appFramework={frameworkData}
|
||||||
|
userdata={userdata}
|
||||||
|
autotry={true}
|
||||||
|
setCloseWindow={setCloseWindow}
|
||||||
|
setUsecaseSearch={setUsecaseSearch}
|
||||||
|
apps={apps}
|
||||||
|
/>
|
||||||
|
</Dialog>
|
||||||
|
<div style={{minWidth: 250, maxWidth: 250, padding: 15, borderRadius: theme.palette.borderRadius, position: "relative", }}>
|
||||||
|
<Typography variant="body1" style={{textAlign: "center"}}>
|
||||||
|
Suggested Workflows ({finishedUsecases.length}/{usecaseSuggestions.length})
|
||||||
|
</Typography>
|
||||||
|
<IconButton
|
||||||
|
style={{
|
||||||
|
zIndex: 5000,
|
||||||
|
position: "absolute",
|
||||||
|
top: 8,
|
||||||
|
right: 8,
|
||||||
|
color: "grey",
|
||||||
|
padding: 2,
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
if (setUsecaseSuggestions !== undefined) {
|
||||||
|
setUsecaseSuggestions([])
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseIcon style={{height: 18, width: 18, }} />
|
||||||
|
</IconButton>
|
||||||
|
{usecaseSuggestions.map((usecase, index) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IndividualUsecase
|
||||||
|
key={index}
|
||||||
|
usecase={usecase}
|
||||||
|
index={index}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</Paper>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SuggestedWorkflows;
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,872 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import ReactGA from 'react-ga4';
|
||||||
|
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.jsx';
|
||||||
|
import {
|
||||||
|
Fade,
|
||||||
|
IconButton,
|
||||||
|
FormGroup,
|
||||||
|
FormControl,
|
||||||
|
InputLabel,
|
||||||
|
FormLabel,
|
||||||
|
FormControlLabel,
|
||||||
|
Select,
|
||||||
|
MenuItem,
|
||||||
|
Grid,
|
||||||
|
Paper,
|
||||||
|
Typography,
|
||||||
|
TextField,
|
||||||
|
Zoom,
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListItemText,
|
||||||
|
Divider,
|
||||||
|
Tooltip,
|
||||||
|
Chip,
|
||||||
|
ButtonGroup,
|
||||||
|
} 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, setUsecaseItems] = useState([
|
||||||
|
{
|
||||||
|
"search": "Phishing",
|
||||||
|
"usecase_search": undefined,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"search": "Enrichment",
|
||||||
|
"usecase_search": undefined,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"search": "Enrichment",
|
||||||
|
"usecase_search": "SIEM alert enrichment",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"search": "Build your own",
|
||||||
|
"usecase_search": undefined,
|
||||||
|
}])
|
||||||
|
|
||||||
|
/*
|
||||||
|
<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}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isCloud) {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "welcome",
|
||||||
|
action: `click_${label}`,
|
||||||
|
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!")
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//navigate(`/welcome?tab=1`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const foundTemplate = params["workflow_template"];
|
||||||
|
if (foundTemplate !== null && foundTemplate !== undefined) {
|
||||||
|
console.log("Found workflow template: ", foundTemplate)
|
||||||
|
|
||||||
|
var sourceapp = undefined
|
||||||
|
var destinationapp = undefined
|
||||||
|
var action = undefined
|
||||||
|
const srcapp = params["source_app"];
|
||||||
|
if (srcapp !== null && srcapp !== undefined) {
|
||||||
|
sourceapp = srcapp
|
||||||
|
}
|
||||||
|
|
||||||
|
const dstapp = params["dest_app"];
|
||||||
|
if (dstapp !== null && dstapp !== undefined) {
|
||||||
|
destinationapp = dstapp
|
||||||
|
}
|
||||||
|
|
||||||
|
const act = params["action"];
|
||||||
|
if (act !== null && act !== undefined) {
|
||||||
|
action = act
|
||||||
|
}
|
||||||
|
|
||||||
|
//defaultSearch={foundTemplate}
|
||||||
|
//
|
||||||
|
usecaseItems[0] = {
|
||||||
|
"search": "enrichment",
|
||||||
|
"usecase_search": foundTemplate,
|
||||||
|
"sourceapp": sourceapp,
|
||||||
|
"destinationapp": destinationapp,
|
||||||
|
"autotry": action === "try",
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Adding: ", usecaseItems[0])
|
||||||
|
|
||||||
|
setUsecaseItems(usecaseItems)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
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(240)
|
||||||
|
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({})
|
||||||
|
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
navigate("/welcome?tab=2")
|
||||||
|
} else if (activeStep === 1) {
|
||||||
|
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 formattedCarousel = appFramework === undefined || appFramework === null ? [] : usecaseItems.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<div style={{minWidth: "95%", maxWidth: "95%", marginLeft: 5, marginRight: 5, }}>
|
||||||
|
<UsecaseSearch
|
||||||
|
globalUrl={globalUrl}
|
||||||
|
defaultSearch={item.search}
|
||||||
|
usecaseSearch={item.usecase_search}
|
||||||
|
appFramework={appFramework}
|
||||||
|
apps={apps}
|
||||||
|
getFramework={getFramework}
|
||||||
|
userdata={userdata}
|
||||||
|
autotry={item.autotry}
|
||||||
|
sourceapp={item.sourceapp}
|
||||||
|
destinationapp={item.destinationapp}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
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">
|
||||||
|
In order to understand how we best can help you find relevant Usecases, please provide the information below. 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: 50, marginRight: 30, marginBottom: 0, }} color="textSecondary">
|
||||||
|
Apps for each category are shown based on your activity and can be changed by clicking their icon. We will help you connect them later.
|
||||||
|
</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={{
|
||||||
|
flex: 1,
|
||||||
|
width: "100%",
|
||||||
|
padding: 25,
|
||||||
|
margin: buttonMargin,
|
||||||
|
fontSize: 18,
|
||||||
|
borderColor: finishedApps.includes("CASES") ? "inherit" : "#f86a3e",
|
||||||
|
}} 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>
|
||||||
|
|
||||||
|
<div style={{marginTop: 0, }}>
|
||||||
|
<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={formattedCarousel}
|
||||||
|
activeIndex={thumbIndex}
|
||||||
|
infiniteLoop
|
||||||
|
mouseTracking={false}
|
||||||
|
responsive={responsive}
|
||||||
|
// activeIndex={activeIndex}
|
||||||
|
controlsStrategy="responsive"
|
||||||
|
autoPlay={false}
|
||||||
|
infinite={true}
|
||||||
|
animationType="fadeout"
|
||||||
|
animationDuration={800}
|
||||||
|
disableButtonsControls
|
||||||
|
|
||||||
|
/>
|
||||||
|
</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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const extraHeight = isCloud ? -7 : 0
|
||||||
|
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 ? -625-extraHeight : -576, left: activeStep === 1 ? 125 : -125+clickdiff, borderRadius: "50px 0px 0px 50px", }}
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={"outlined"}
|
||||||
|
color="primary"
|
||||||
|
onClick={handleNext}
|
||||||
|
style={{marginLeft: 10, height: 64, width: 100, position: "absolute", top: activeStep === 1 ? -625-extraHeight : -576, left: activeStep === 1 ? 738 : 489+clickdiff, borderRadius: "0px 50px 50px 0px", }}
|
||||||
|
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!")
|
||||||
|
|
||||||
|
setclickdiff(240)
|
||||||
|
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
|
||||||
@@ -0,0 +1,370 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import { useTheme } from '@material-ui/core/styles';
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
|
||||||
|
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
|
||||||
|
|
||||||
|
import algoliasearch from 'algoliasearch/lite';
|
||||||
|
import { InstantSearch, Configure, connectSearchBox, connectHits } from 'react-instantsearch-dom';
|
||||||
|
import {
|
||||||
|
Grid,
|
||||||
|
Paper,
|
||||||
|
TextField,
|
||||||
|
ButtonBase,
|
||||||
|
InputAdornment,
|
||||||
|
Typography,
|
||||||
|
Button,
|
||||||
|
Tooltip,
|
||||||
|
Zoom,
|
||||||
|
Chip,
|
||||||
|
} from '@material-ui/core';
|
||||||
|
|
||||||
|
import WorkflowPaper from "../components/WorkflowPaper.jsx"
|
||||||
|
import WorkflowPaperNew from "../components/WorkflowPaperNew.jsx"
|
||||||
|
|
||||||
|
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
|
||||||
|
const AppGrid = props => {
|
||||||
|
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, alternativeView, } = props
|
||||||
|
|
||||||
|
const isCloud =
|
||||||
|
window.location.host === "localhost:3002" ||
|
||||||
|
window.location.host === "shuffler.io";
|
||||||
|
|
||||||
|
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
|
||||||
|
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
|
||||||
|
const theme = useTheme();
|
||||||
|
//const [apps, setApps] = React.useState([]);
|
||||||
|
//const [filteredApps, setFilteredApps] = React.useState([]);
|
||||||
|
const [formMail, setFormMail] = React.useState("");
|
||||||
|
const [message, setMessage] = React.useState("");
|
||||||
|
const [formMessage, setFormMessage] = React.useState("");
|
||||||
|
const [usecases, setUsecases] = React.useState([]);
|
||||||
|
|
||||||
|
const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
|
||||||
|
|
||||||
|
const innerColor = "rgba(255,255,255,0.65)"
|
||||||
|
const borderRadius = 3
|
||||||
|
window.title = "Shuffle | Workflows | Discover your use-case"
|
||||||
|
|
||||||
|
const submitContact = (email, message) => {
|
||||||
|
const data = {
|
||||||
|
"firstname": "",
|
||||||
|
"lastname": "",
|
||||||
|
"title": "",
|
||||||
|
"companyname": "",
|
||||||
|
"email": email,
|
||||||
|
"phone": "",
|
||||||
|
"message": message,
|
||||||
|
}
|
||||||
|
|
||||||
|
const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
|
||||||
|
|
||||||
|
fetch(globalUrl+"/api/v1/contact", {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(response => {
|
||||||
|
if (response.success === true) {
|
||||||
|
setFormMessage(response.reason)
|
||||||
|
//alert.info("Thanks for submitting!")
|
||||||
|
} else {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
}
|
||||||
|
|
||||||
|
setFormMail("")
|
||||||
|
setMessage("")
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
console.log(error)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleKeysetting = (categorydata, workflows) => {
|
||||||
|
console.log("Workflows: ", workflows)
|
||||||
|
//workflows[0].category = ["detect"]
|
||||||
|
//workflows[0].usecase_ids = ["Correlate tickets"]
|
||||||
|
|
||||||
|
if (workflows !== undefined && workflows !== null) {
|
||||||
|
const newcategories = []
|
||||||
|
for (var key in categorydata) {
|
||||||
|
var category = categorydata[key]
|
||||||
|
category.matches = []
|
||||||
|
|
||||||
|
for (var subcategorykey in category.list) {
|
||||||
|
var subcategory = category.list[subcategorykey]
|
||||||
|
subcategory.matches = []
|
||||||
|
|
||||||
|
for (var workflowkey in workflows) {
|
||||||
|
const workflow = workflows[workflowkey]
|
||||||
|
|
||||||
|
if (workflow.usecase_ids !== undefined && workflow.usecase_ids !== null) {
|
||||||
|
for (var usecasekey in workflow.usecase_ids) {
|
||||||
|
if (workflow.usecase_ids[usecasekey].toLowerCase() === subcategory.name.toLowerCase()) {
|
||||||
|
console.log("Got match: ", workflow.usecase_ids[usecasekey])
|
||||||
|
|
||||||
|
category.matches.push({
|
||||||
|
"workflow": workflow.id,
|
||||||
|
"category": subcategory.name,
|
||||||
|
})
|
||||||
|
subcategory.matches.push(workflow.id)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (subcategory.matches.length > 0) {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
newcategories.push(category)
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Categories: ", newcategories)
|
||||||
|
setUsecases(newcategories)
|
||||||
|
} else {
|
||||||
|
for (var key in categorydata) {
|
||||||
|
categorydata[key].matches = []
|
||||||
|
}
|
||||||
|
setUsecases(categorydata)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchUsecases = (workflows) => {
|
||||||
|
fetch(globalUrl + "/api/v1/workflows/usecases", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for usecases");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson.success !== false) {
|
||||||
|
console.log("Usecases: ", responseJson)
|
||||||
|
//handleKeysetting(responseJson, workflows)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
//alert.error("ERROR: " + error.toString());
|
||||||
|
console.log("ERROR: " + error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchUsecases()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// value={currentRefinement}
|
||||||
|
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
||||||
|
useEffect(() => {
|
||||||
|
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
|
||||||
|
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||||
|
const params = Object.fromEntries(urlSearchParams.entries())
|
||||||
|
const foundQuery = params["q"]
|
||||||
|
if (foundQuery !== null && foundQuery !== undefined) {
|
||||||
|
console.log("Got query: ", foundQuery)
|
||||||
|
refine(foundQuery)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form noValidate action="" role="search">
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1em",
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon style={{marginLeft: 5}}/>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
autoComplete='off'
|
||||||
|
type="search"
|
||||||
|
color="primary"
|
||||||
|
value={currentRefinement}
|
||||||
|
placeholder="Find Workflows..."
|
||||||
|
id="shuffle_search_field"
|
||||||
|
onChange={(event) => {
|
||||||
|
refine(event.currentTarget.value)
|
||||||
|
}}
|
||||||
|
limit={5}
|
||||||
|
/>
|
||||||
|
{/*isSearchStalled ? 'My search is stalled' : ''*/}
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const paperAppContainer = {
|
||||||
|
display: "flex",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
alignContent: "space-between",
|
||||||
|
marginTop: 5,
|
||||||
|
}
|
||||||
|
|
||||||
|
var workflowDelay = -50
|
||||||
|
const Hits = ({ hits }) => {
|
||||||
|
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
|
||||||
|
var counted = 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container spacing={4} style={paperAppContainer}>
|
||||||
|
{hits.map((data, index) => {
|
||||||
|
workflowDelay += 50
|
||||||
|
|
||||||
|
if (counted === 12/xs*rowHandler) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
counted += 1
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
|
||||||
|
<Grid item xs={xs} style={{ padding: "12px 10px 12px 10px" }}>
|
||||||
|
{alternativeView === true ?
|
||||||
|
<WorkflowPaperNew key={index} data={data} />
|
||||||
|
:
|
||||||
|
<WorkflowPaper key={index} data={data} />
|
||||||
|
}
|
||||||
|
</Grid>
|
||||||
|
</Zoom>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const CustomSearchBox = connectSearchBox(SearchBox)
|
||||||
|
const CustomHits = connectHits(Hits)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{width: "100%", position: "relative", height: "100%",}}>
|
||||||
|
<InstantSearch searchClient={searchClient} indexName="workflows">
|
||||||
|
<Configure clickAnalytics />
|
||||||
|
<div style={{maxWidth: 450, margin: "auto", marginTop: 15, marginBottom: 15, }}>
|
||||||
|
<CustomSearchBox />
|
||||||
|
</div>
|
||||||
|
{usecases !== null && usecases !== undefined && usecases.length > 0 ?
|
||||||
|
<div style={{ display: "flex", margin: "auto", width: 875,}}>
|
||||||
|
{usecases.map((usecase, index) => {
|
||||||
|
console.log(usecase)
|
||||||
|
return (
|
||||||
|
<Chip
|
||||||
|
key={usecase.name}
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme.palette.surfaceColor,
|
||||||
|
marginRight: 10,
|
||||||
|
paddingLeft: 5,
|
||||||
|
paddingRight: 5,
|
||||||
|
height: 28,
|
||||||
|
cursor: "pointer",
|
||||||
|
border: `1px solid ${usecase.color}`,
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
label={`${usecase.name} (${usecase.matches.length}/${usecase.list.length})`}
|
||||||
|
onClick={() => {
|
||||||
|
console.log("Clicked!")
|
||||||
|
//addFilter(usecase.name.slice(3,usecase.name.length))
|
||||||
|
}}
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
: null}
|
||||||
|
<CustomHits hitsPerPage={5}/>
|
||||||
|
</InstantSearch>
|
||||||
|
{showSuggestion === true ?
|
||||||
|
<div style={{maxWidth: isMobile ? "100%" : "60%", margin: "auto", paddingTop: 0, textAlign: "center",}}>
|
||||||
|
<Typography variant="h6" style={{color: "white", marginTop: 50,}}>
|
||||||
|
Can't find what you're looking for?
|
||||||
|
</Typography>
|
||||||
|
<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
|
||||||
|
<TextField
|
||||||
|
required
|
||||||
|
style={{flex: "1", marginRight: "15px", backgroundColor: theme.palette.inputColor}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
fullWidth={true}
|
||||||
|
placeholder="Email (optional)"
|
||||||
|
type="email"
|
||||||
|
id="email-handler"
|
||||||
|
autoComplete="email"
|
||||||
|
margin="normal"
|
||||||
|
variant="outlined"
|
||||||
|
onChange={e => setFormMail(e.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
required
|
||||||
|
style={{flex: "1", backgroundColor: theme.palette.inputColor}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
color="primary"
|
||||||
|
fullWidth={true}
|
||||||
|
placeholder="What apps do you want to see?"
|
||||||
|
type=""
|
||||||
|
id="standard-required"
|
||||||
|
margin="normal"
|
||||||
|
variant="outlined"
|
||||||
|
autoComplete="off"
|
||||||
|
onChange={e => setMessage(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
style={buttonStyle}
|
||||||
|
disabled={message.length === 0}
|
||||||
|
onClick={() => {
|
||||||
|
submitContact(formMail, message)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
<Typography style={{color: "white"}} variant="body2">{formMessage}</Typography>
|
||||||
|
</div>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
|
||||||
|
<span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: 120, }}>
|
||||||
|
<Typography variant="body2" color="textSecondary" style={{}}>
|
||||||
|
Search by
|
||||||
|
</Typography>
|
||||||
|
<a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
|
||||||
|
<img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{height: 17, marginLeft: 5, marginTop: 3,}} />
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AppGrid;
|
||||||
@@ -0,0 +1,302 @@
|
|||||||
|
import React, { useState, useEffect, useLayoutEffect } from "react";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Chip,
|
||||||
|
Typography,
|
||||||
|
Paper,
|
||||||
|
Avatar,
|
||||||
|
Grid,
|
||||||
|
Tooltip,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
AvatarGroup,
|
||||||
|
} from "@mui/material"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Restore as RestoreIcon,
|
||||||
|
Edit as EditIcon,
|
||||||
|
BubbleChart as BubbleChartIcon,
|
||||||
|
MoreVert as MoreVertIcon,
|
||||||
|
} from '@material-ui/icons';
|
||||||
|
|
||||||
|
import { useNavigate, Link, useParams } from "react-router-dom";
|
||||||
|
|
||||||
|
const workflowActionStyle = {
|
||||||
|
display: "flex",
|
||||||
|
width: 160,
|
||||||
|
height: 44,
|
||||||
|
justifyContent: "space-between",
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const chipStyle = {
|
||||||
|
backgroundColor: "#3d3f43",
|
||||||
|
marginRight: 5,
|
||||||
|
paddingLeft: 5,
|
||||||
|
paddingRight: 5,
|
||||||
|
height: 28,
|
||||||
|
cursor: "pointer",
|
||||||
|
borderColor: "#3d3f43",
|
||||||
|
color: "white",
|
||||||
|
}
|
||||||
|
|
||||||
|
const WorkflowPaper = (props) => {
|
||||||
|
const { data } = props;
|
||||||
|
let navigate = useNavigate();
|
||||||
|
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||||
|
const appGroup = data.action_references === undefined || data.action_references === null ? [] : data.action_references
|
||||||
|
|
||||||
|
const isCloud =
|
||||||
|
window.location.host === "localhost:3002" ||
|
||||||
|
window.location.host === "shuffler.io";
|
||||||
|
|
||||||
|
//console.log("Workflow: ", data)
|
||||||
|
var boxColor = "#86c142";
|
||||||
|
|
||||||
|
const paperAppStyle = {
|
||||||
|
minHeight: 130,
|
||||||
|
maxHeight: 130,
|
||||||
|
overflow: "hidden",
|
||||||
|
width: "100%",
|
||||||
|
color: "white",
|
||||||
|
backgroundColor: theme.palette.surfaceColor,
|
||||||
|
padding: "12px 12px 0px 15px",
|
||||||
|
borderRadius: 5,
|
||||||
|
display: "flex",
|
||||||
|
boxSizing: "border-box",
|
||||||
|
position: "relative",
|
||||||
|
}
|
||||||
|
|
||||||
|
var parsedName = data.name;
|
||||||
|
if (
|
||||||
|
parsedName !== undefined &&
|
||||||
|
parsedName !== null &&
|
||||||
|
parsedName.length > 20
|
||||||
|
) {
|
||||||
|
parsedName = parsedName.slice(0, 21) + "..";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const imageStyle = {
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
marginRight: 10,
|
||||||
|
border: "1px solid rgba(255,255,255,0.3)",
|
||||||
|
}
|
||||||
|
var image = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.image !== undefined && data.creator_info.image !== null && data.creator_info.image.length > 0 ? <Avatar alt={data.creator} src={data.creator_info.image} style={imageStyle}/> : <Avatar alt={"shuffle_image"} src={theme.palette.defaultImage} style={imageStyle}/>
|
||||||
|
const creatorname = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.username !== undefined && data.creator_info.username !== null && data.creator_info.username.length > 0 ? data.creator_info.username : ""
|
||||||
|
var orgName = "";
|
||||||
|
var orgId = "";
|
||||||
|
if ((data.objectID === undefined || data.objectID === null) && data.id !== undefined && data.id !== null) {
|
||||||
|
data.objectID = data.id
|
||||||
|
}
|
||||||
|
|
||||||
|
//console.log("IMG: ", data)
|
||||||
|
var parsedUrl = `/workflows/${data.objectID}`
|
||||||
|
if (data.__queryID !== undefined && data.__queryID !== null) {
|
||||||
|
parsedUrl += `?queryID=${data.__queryID}`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isCloud) {
|
||||||
|
parsedUrl = `https://shuffler.io${parsedUrl}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{width: "100%", position: "relative",}}>
|
||||||
|
<Paper square style={paperAppStyle}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: 1,
|
||||||
|
left: 1,
|
||||||
|
height: 12,
|
||||||
|
width: 12,
|
||||||
|
backgroundColor: boxColor,
|
||||||
|
borderRadius: "0 100px 0 0",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
style={{ display: "flex", flexDirection: "column", width: "100%" }}
|
||||||
|
>
|
||||||
|
<Grid item style={{ display: "flex", maxHeight: 34 }}>
|
||||||
|
<Tooltip title={`${creatorname}`} placement="bottom">
|
||||||
|
<div
|
||||||
|
style={{ cursor: data.creator_info !== undefined ? "pointer" : "inherit" }}
|
||||||
|
onClick={() => {
|
||||||
|
if (data.creator_info !== undefined) {
|
||||||
|
navigate("/creators/"+data.creator_info.username)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{image}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title={`Edit ${data.name}`} placement="bottom">
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
style={{
|
||||||
|
marginBottom: 0,
|
||||||
|
paddingBottom: 0,
|
||||||
|
maxHeight: 30,
|
||||||
|
flex: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href={parsedUrl}
|
||||||
|
rel="norefferer"
|
||||||
|
target="_blank"
|
||||||
|
style={{ textDecoration: "none", color: "inherit" }}
|
||||||
|
>
|
||||||
|
{parsedName}
|
||||||
|
</a>
|
||||||
|
</Typography>
|
||||||
|
</Tooltip>
|
||||||
|
</Grid>
|
||||||
|
<Grid item style={workflowActionStyle}>
|
||||||
|
{appGroup.length > 0 ?
|
||||||
|
<div style={{display: "flex", marginTop: 8, }}>
|
||||||
|
<AvatarGroup max={4} style={{marginLeft: 5, maxHeight: 24,}}>
|
||||||
|
{appGroup.map((app, index) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
style={{
|
||||||
|
height: 24,
|
||||||
|
width: 24,
|
||||||
|
filter: "brightness(0.6)",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
navigate("/apps/"+app.id)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tooltip color="primary" title={app.name} placement="bottom">
|
||||||
|
<Avatar alt={app.name} src={app.image_url} style={{width: 24, height: 24}}/>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</AvatarGroup>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<Tooltip color="primary" title="Action amount" placement="bottom">
|
||||||
|
<span style={{ color: "#979797", display: "flex" }}>
|
||||||
|
<BubbleChartIcon
|
||||||
|
style={{ marginTop: "auto", marginBottom: "auto" }}
|
||||||
|
/>
|
||||||
|
<Typography
|
||||||
|
style={{
|
||||||
|
marginLeft: 5,
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.actions === undefined || data.actions === null ? 1 : data.actions.length}
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
}
|
||||||
|
<Tooltip
|
||||||
|
color="primary"
|
||||||
|
title="Trigger amount"
|
||||||
|
placement="bottom"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
style={{ marginLeft: 15, color: "#979797", display: "flex" }}
|
||||||
|
>
|
||||||
|
<RestoreIcon
|
||||||
|
style={{
|
||||||
|
color: "#979797",
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Typography
|
||||||
|
style={{
|
||||||
|
marginLeft: 5,
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.triggers === undefined || data.triggers === null ? 1 : data.triggers.length}
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip color="primary" title="Subflows used" placement="bottom">
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
marginLeft: 15,
|
||||||
|
display: "flex",
|
||||||
|
color: "#979797",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="18"
|
||||||
|
height="18"
|
||||||
|
viewBox="0 0 18 18"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
style={{
|
||||||
|
color: "#979797",
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 0H15V15H0V0ZM16 16H18V18H16V16ZM16 13H18V15H16V13ZM16 10H18V12H16V10ZM16 7H18V9H16V7ZM16 4H18V6H16V4ZM13 16H15V18H13V16ZM10 16H12V18H10V16ZM7 16H9V18H7V16ZM4 16H6V18H4V16Z"
|
||||||
|
fill="#979797"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<Typography
|
||||||
|
style={{
|
||||||
|
marginLeft: 5,
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{0}
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
</Grid>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
style={{
|
||||||
|
justifyContent: "left",
|
||||||
|
overflow: "hidden",
|
||||||
|
marginTop: 5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.tags !== undefined && data.tags !== null
|
||||||
|
? data.tags.map((tag, index) => {
|
||||||
|
if (index >= 3) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Chip
|
||||||
|
key={index}
|
||||||
|
style={chipStyle}
|
||||||
|
label={tag}
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
: null}
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Paper>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default WorkflowPaper
|
||||||
@@ -0,0 +1,332 @@
|
|||||||
|
import React, { useState, useEffect, useLayoutEffect } from "react";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Chip,
|
||||||
|
Typography,
|
||||||
|
Paper,
|
||||||
|
Avatar,
|
||||||
|
Grid,
|
||||||
|
Tooltip,
|
||||||
|
Button,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
AvatarGroup,
|
||||||
|
} from "@mui/material"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Restore as RestoreIcon,
|
||||||
|
Edit as EditIcon,
|
||||||
|
BubbleChart as BubbleChartIcon,
|
||||||
|
MoreVert as MoreVertIcon,
|
||||||
|
} from '@material-ui/icons';
|
||||||
|
|
||||||
|
import { useNavigate, Link, useParams } from "react-router-dom";
|
||||||
|
|
||||||
|
const workflowActionStyle = {
|
||||||
|
display: "flex",
|
||||||
|
width: 160,
|
||||||
|
height: 44,
|
||||||
|
justifyContent: "space-between",
|
||||||
|
}
|
||||||
|
|
||||||
|
const paperAppStyle = {
|
||||||
|
minHeight: 130,
|
||||||
|
maxHeight: 130,
|
||||||
|
overflow: "hidden",
|
||||||
|
width: "100%",
|
||||||
|
color: "white",
|
||||||
|
backgroundColor: theme.palette.surfaceColor,
|
||||||
|
padding: "12px 12px 0px 15px",
|
||||||
|
borderRadius: 5,
|
||||||
|
display: "flex",
|
||||||
|
boxSizing: "border-box",
|
||||||
|
position: "relative",
|
||||||
|
}
|
||||||
|
|
||||||
|
const chipStyle = {
|
||||||
|
backgroundColor: "#3d3f43",
|
||||||
|
marginRight: 5,
|
||||||
|
paddingLeft: 5,
|
||||||
|
paddingRight: 5,
|
||||||
|
height: 28,
|
||||||
|
cursor: "pointer",
|
||||||
|
borderColor: "#3d3f43",
|
||||||
|
color: "white",
|
||||||
|
}
|
||||||
|
|
||||||
|
const WorkflowPaper = (props) => {
|
||||||
|
const { data } = props;
|
||||||
|
let navigate = useNavigate();
|
||||||
|
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||||
|
const appGroup = data.action_references === undefined || data.action_references === null ? [] : data.action_references
|
||||||
|
|
||||||
|
const activateWorkflow = (workflow) => {
|
||||||
|
console.log("Should activate: ", workflow)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//console.log("Workflow: ", data)
|
||||||
|
var boxColor = "#86c142";
|
||||||
|
|
||||||
|
var parsedName = data.name;
|
||||||
|
if (
|
||||||
|
parsedName !== undefined &&
|
||||||
|
parsedName !== null &&
|
||||||
|
parsedName.length > 35
|
||||||
|
) {
|
||||||
|
parsedName = parsedName.slice(0, 36) + "..";
|
||||||
|
}
|
||||||
|
|
||||||
|
const imageStyle = {
|
||||||
|
width: 28,
|
||||||
|
height: 28,
|
||||||
|
marginRight: 10,
|
||||||
|
border: "1px solid rgba(255,255,255,0.3)",
|
||||||
|
}
|
||||||
|
|
||||||
|
var image = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.image !== undefined && data.creator_info.image !== null && data.creator_info.image.length > 0 ? <Avatar alt={data.creator} src={data.creator_info.image} style={imageStyle}/> : <Avatar alt={"shuffle_image"} src={theme.palette.defaultImage} style={imageStyle}/>
|
||||||
|
const creatorname = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.username !== undefined && data.creator_info.username !== null && data.creator_info.username.length > 0 ? data.creator_info.username : "Shuffle"
|
||||||
|
var orgName = "";
|
||||||
|
var orgId = "";
|
||||||
|
if ((data.objectID === undefined || data.objectID === null) && data.id !== undefined && data.id !== null) {
|
||||||
|
data.objectID = data.id
|
||||||
|
}
|
||||||
|
|
||||||
|
//console.log("IMG: ", data)
|
||||||
|
var parsedUrl = `/workflows/${data.objectID}`
|
||||||
|
if (data.__queryID !== undefined && data.__queryID !== null) {
|
||||||
|
parsedUrl += `?queryID=${data.__queryID}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const paperImgStyle = {
|
||||||
|
height: 150,
|
||||||
|
width: "100%",
|
||||||
|
backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)",
|
||||||
|
color: "white",
|
||||||
|
position: "relative",
|
||||||
|
borderRadius: "10px 10px 0% 0%",
|
||||||
|
}
|
||||||
|
|
||||||
|
const bgImage1 = "https://avatars.githubusercontent.com/u/5719530?v=4"
|
||||||
|
const bgImage2 = "https://avatars.githubusercontent.com/u/5719530?v=4"
|
||||||
|
const itemSize = 70
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{width: "100%", position: "relative",}}>
|
||||||
|
<div style={paperImgStyle}>
|
||||||
|
<div style={{position: "absolute", left: 55, top: 42, height: itemSize, width: itemSize, }}>
|
||||||
|
<img src={bgImage1} alt="Image alt" style={{overflow: "hidden", width: itemSize, height: itemSize, borderRadius: 50, border: "1px solid rgba(255,255,255,0.3)"}} />
|
||||||
|
</div>
|
||||||
|
<div style={{position: "absolute", left: 160, top: 42, height: itemSize, width: itemSize, }}>
|
||||||
|
<img src={bgImage2} alt="Image alt" style={{overflow: "hidden", width: itemSize, height: itemSize, borderRadius: 50, border: "1px solid rgba(255,255,255,0.3)"}} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Paper square style={paperAppStyle}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: 1,
|
||||||
|
left: 1,
|
||||||
|
height: 12,
|
||||||
|
width: 12,
|
||||||
|
backgroundColor: boxColor,
|
||||||
|
borderRadius: "0 100px 0 0",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
style={{ display: "flex", flexDirection: "column", width: "100%" }}
|
||||||
|
>
|
||||||
|
<Grid item style={{ display: "flex", maxHeight: 34 }}>
|
||||||
|
<Tooltip title={`Released by ${creatorname}`} placement="bottom">
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
cursor: data.creator_info !== undefined ? "pointer" : "inherit",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
if (data.creator_info !== undefined) {
|
||||||
|
navigate("/creators/"+data.creator_info.username)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{image}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title={`See ${data.name}`} placement="bottom">
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
style={{
|
||||||
|
marginBottom: 0,
|
||||||
|
paddingBottom: 0,
|
||||||
|
maxHeight: 30,
|
||||||
|
flex: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
to={parsedUrl}
|
||||||
|
style={{ textDecoration: "none", color: "inherit" }}
|
||||||
|
>
|
||||||
|
{parsedName}
|
||||||
|
</Link>
|
||||||
|
</Typography>
|
||||||
|
</Tooltip>
|
||||||
|
</Grid>
|
||||||
|
<Grid item style={workflowActionStyle}>
|
||||||
|
{/*
|
||||||
|
{appGroup.length > 0 ?
|
||||||
|
<div style={{display: "flex", marginTop: 8, }}>
|
||||||
|
<AvatarGroup max={4} style={{marginLeft: 5, maxHeight: 24,}}>
|
||||||
|
{appGroup.map((app, index) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
style={{
|
||||||
|
height: 24,
|
||||||
|
width: 24,
|
||||||
|
filter: "brightness(0.6)",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
navigate("/apps/"+app.id)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tooltip color="primary" title={app.name} placement="bottom">
|
||||||
|
<Avatar alt={app.name} src={app.image_url} style={{width: 24, height: 24}}/>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</AvatarGroup>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<Tooltip color="primary" title="Action amount" placement="bottom">
|
||||||
|
<span style={{ color: "#979797", display: "flex" }}>
|
||||||
|
<BubbleChartIcon
|
||||||
|
style={{ marginTop: "auto", marginBottom: "auto" }}
|
||||||
|
/>
|
||||||
|
<Typography
|
||||||
|
style={{
|
||||||
|
marginLeft: 5,
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.actions === undefined || data.actions === null ? 1 : data.actions.length}
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
}
|
||||||
|
*/}
|
||||||
|
{/*
|
||||||
|
<Tooltip
|
||||||
|
color="primary"
|
||||||
|
title="Trigger amount"
|
||||||
|
placement="bottom"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
style={{ marginLeft: 15, color: "#979797", display: "flex" }}
|
||||||
|
>
|
||||||
|
<RestoreIcon
|
||||||
|
style={{
|
||||||
|
color: "#979797",
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Typography
|
||||||
|
style={{
|
||||||
|
marginLeft: 5,
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.triggers === undefined || data.triggers === null ? 1 : data.triggers.length}
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip color="primary" title="Subflows used" placement="bottom">
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
marginLeft: 15,
|
||||||
|
display: "flex",
|
||||||
|
color: "#979797",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="18"
|
||||||
|
height="18"
|
||||||
|
viewBox="0 0 18 18"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
style={{
|
||||||
|
color: "#979797",
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 0H15V15H0V0ZM16 16H18V18H16V16ZM16 13H18V15H16V13ZM16 10H18V12H16V10ZM16 7H18V9H16V7ZM16 4H18V6H16V4ZM13 16H15V18H13V16ZM10 16H12V18H10V16ZM7 16H9V18H7V16ZM4 16H6V18H4V16Z"
|
||||||
|
fill="#979797"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<Typography
|
||||||
|
style={{
|
||||||
|
marginLeft: 5,
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{0}
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
*/}
|
||||||
|
</Grid>
|
||||||
|
{/*
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
style={{
|
||||||
|
justifyContent: "left",
|
||||||
|
overflow: "hidden",
|
||||||
|
marginTop: 5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.tags !== undefined && data.tags !== null
|
||||||
|
? data.tags.map((tag, index) => {
|
||||||
|
if (index >= 3) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Chip
|
||||||
|
key={index}
|
||||||
|
style={chipStyle}
|
||||||
|
label={tag}
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
: null}
|
||||||
|
</Grid>
|
||||||
|
*/}
|
||||||
|
|
||||||
|
<Button variant="outlined" style={{textDecoration: "none", borderRadius: 25,}} onClick={() => {
|
||||||
|
activateWorkflow(data)
|
||||||
|
}}>
|
||||||
|
Try this workflow
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</Paper>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default WorkflowPaper
|
||||||
@@ -0,0 +1,200 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
import { useTheme } from '@material-ui/core/styles';
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
|
||||||
|
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
|
||||||
|
|
||||||
|
//import algoliasearch from 'algoliasearch/lite';
|
||||||
|
import algoliasearch from 'algoliasearch';
|
||||||
|
import { InstantSearch, connectSearchBox, connectHits } from 'react-instantsearch-dom';
|
||||||
|
import { Grid, Paper, TextField, ButtonBase, InputAdornment, Typography, Button, Tooltip} from '@material-ui/core';
|
||||||
|
|
||||||
|
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
|
||||||
|
const WorkflowSearch = props => {
|
||||||
|
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, newSelectedApp, setNewSelectedApp, defaultSearch, showSearch, ConfiguredHits, selectAble, } = props
|
||||||
|
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
|
||||||
|
|
||||||
|
const xs = parsedXs === undefined || parsedXs === null ? 12 : parsedXs
|
||||||
|
const theme = useTheme();
|
||||||
|
//const [apps, setApps] = React.useState([]);
|
||||||
|
//const [filteredApps, setFilteredApps] = React.useState([]);
|
||||||
|
const [formMail, setFormMail] = React.useState("");
|
||||||
|
const [message, setMessage] = React.useState("");
|
||||||
|
const [formMessage, setFormMessage] = React.useState("");
|
||||||
|
const [selectedApp, setSelectedApp] = React.useState({});
|
||||||
|
|
||||||
|
const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
|
||||||
|
|
||||||
|
const innerColor = "rgba(255,255,255,0.65)"
|
||||||
|
const borderRadius = 3
|
||||||
|
window.title = "Shuffle | Apps | Find and integration any app"
|
||||||
|
|
||||||
|
const submitContact = (email, message) => {
|
||||||
|
const data = {
|
||||||
|
"firstname": "",
|
||||||
|
"lastname": "",
|
||||||
|
"title": "",
|
||||||
|
"companyname": "",
|
||||||
|
"email": email,
|
||||||
|
"phone": "",
|
||||||
|
"message": message,
|
||||||
|
}
|
||||||
|
|
||||||
|
const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
|
||||||
|
|
||||||
|
fetch(globalUrl+"/api/v1/contact", {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(response => {
|
||||||
|
if (response.success === true) {
|
||||||
|
setFormMessage(response.reason)
|
||||||
|
//alert.info("Thanks for submitting!")
|
||||||
|
} else {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
}
|
||||||
|
|
||||||
|
setFormMail("")
|
||||||
|
setMessage("")
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
setFormMessage(errorMessage)
|
||||||
|
console.log(error)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// value={currentRefinement}
|
||||||
|
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
||||||
|
useEffect(() => {
|
||||||
|
//console.log("FIRST LOAD ONLY? RUN REFINEMENT: !", currentRefinement)
|
||||||
|
if (defaultSearch !== undefined && defaultSearch !== null) {
|
||||||
|
refine(defaultSearch)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form noValidate action="" role="search">
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: "100%",}}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1em",
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon style={{marginLeft: 5}}/>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
autoComplete='on'
|
||||||
|
type="search"
|
||||||
|
color="primary"
|
||||||
|
defaultValue={defaultSearch}
|
||||||
|
placeholder={`Find ${defaultSearch} Workflows...`}
|
||||||
|
id="shuffle_workflow_search_field"
|
||||||
|
onChange={(event) => {
|
||||||
|
refine(event.currentTarget.value)
|
||||||
|
}}
|
||||||
|
limit={5}
|
||||||
|
/>
|
||||||
|
{/*isSearchStalled ? 'My search is stalled' : ''*/}
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
//value={currentRefinement}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectAble === true) {
|
||||||
|
console.log("Make it possible to select a Workflow!!")
|
||||||
|
}
|
||||||
|
|
||||||
|
const Hits = ({ hits }) => {
|
||||||
|
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
|
||||||
|
var counted = 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container spacing={0} style={{border: "1px solid rgba(255,255,255,0.2)", maxHeight: 250, minHeight: 250, overflowY: "auto", overflowX: "hidden",}}>
|
||||||
|
{hits.map((data, index) => {
|
||||||
|
const paperStyle = {
|
||||||
|
backgroundColor: index === mouseHoverIndex ? "rgba(255,255,255,0.8)" : theme.palette.inputColor,
|
||||||
|
color: index === mouseHoverIndex ? theme.palette.inputColor : "rgba(255,255,255,0.8)",
|
||||||
|
border: newSelectedApp.objectID !== data.objectID ? `1px solid rgba(255,255,255,0.2)` : "2px solid #f86a3e",
|
||||||
|
textAlign: "left",
|
||||||
|
padding: 10,
|
||||||
|
cursor: "pointer",
|
||||||
|
position: "relative",
|
||||||
|
overflow: "hidden",
|
||||||
|
width: "100%",
|
||||||
|
}
|
||||||
|
|
||||||
|
if (counted === 12/xs*rowHandler) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
counted += 1
|
||||||
|
var parsedname = ""
|
||||||
|
for (var key = 0; key < data.name.length; key++) {
|
||||||
|
var character = data.name.charAt(key)
|
||||||
|
if (character === character.toUpperCase()) {
|
||||||
|
//console.log(data.name[key], data.name[key+1])
|
||||||
|
if (data.name.charAt(key+1) !== undefined && data.name.charAt(key+1) === data.name.charAt(key+1).toUpperCase()) {
|
||||||
|
} else {
|
||||||
|
parsedname += " "
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
parsedname += character
|
||||||
|
}
|
||||||
|
|
||||||
|
parsedname = (parsedname.charAt(0).toUpperCase()+parsedname.substring(1)).replaceAll("_", " ")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Paper key={index} elevation={0} style={paperStyle} onMouseOver={() => {
|
||||||
|
setMouseHoverIndex(index)
|
||||||
|
}} onMouseOut={() => {
|
||||||
|
setMouseHoverIndex(-1)
|
||||||
|
}} onClick={() => {
|
||||||
|
setNewSelectedApp(data)
|
||||||
|
}}>
|
||||||
|
<div style={{display: "flex"}}>
|
||||||
|
{/*<img alt={data.name} src={data.image_url} style={{width: "100%", maxWidth: 30, minWidth: 30, minHeight: 30, maxHeight: 30, display: "block", }} />*/}
|
||||||
|
<Typography variant="body1" style={{marginTop: 2, marginLeft: 10, }}>
|
||||||
|
{parsedname}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</Paper>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const InputHits = ConfiguredHits === undefined ? Hits : ConfiguredHits
|
||||||
|
const CustomSearchBox = connectSearchBox(SearchBox)
|
||||||
|
const CustomHits = connectHits(InputHits)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{width: "100%", textAlign: "center", position: "relative", height: "100%",}}>
|
||||||
|
<InstantSearch searchClient={searchClient} indexName="workflows">
|
||||||
|
{/* showSearch === false ? null :
|
||||||
|
<div style={{maxWidth: 450, margin: "auto", }}>
|
||||||
|
<CustomSearchBox />
|
||||||
|
</div>
|
||||||
|
*/}
|
||||||
|
<div style={{maxWidth: 450, margin: "auto", }}>
|
||||||
|
<CustomSearchBox />
|
||||||
|
</div>
|
||||||
|
<CustomHits hitsPerPage={5}/>
|
||||||
|
</InstantSearch>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default WorkflowSearch;
|
||||||
@@ -0,0 +1,433 @@
|
|||||||
|
const data = [
|
||||||
|
{
|
||||||
|
selector: "node",
|
||||||
|
css: {
|
||||||
|
label: "data(label)",
|
||||||
|
"text-valign": "center",
|
||||||
|
"font-family":
|
||||||
|
"Segoe UI, Tahoma, Geneva, Verdana, sans-serif, sans-serif",
|
||||||
|
"font-weight": "lighter",
|
||||||
|
"margin-right": "10px",
|
||||||
|
"font-size": "18px",
|
||||||
|
width: "80px",
|
||||||
|
height: "80px",
|
||||||
|
color: "white",
|
||||||
|
padding: "10px",
|
||||||
|
margin: "5px",
|
||||||
|
"border-width": "1px",
|
||||||
|
"text-margin-x": "10px",
|
||||||
|
"z-index": 5001,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "edge",
|
||||||
|
css: {
|
||||||
|
"target-arrow-shape": "triangle",
|
||||||
|
"target-arrow-color": "grey",
|
||||||
|
"curve-style": "unbundled-bezier",
|
||||||
|
label: "data(label)",
|
||||||
|
"text-margin-y": "-15px",
|
||||||
|
width: "5px",
|
||||||
|
color: "white",
|
||||||
|
"line-fill": "linear-gradient",
|
||||||
|
"line-gradient-stop-positions": ["0.0", "100"],
|
||||||
|
"line-gradient-stop-colors": ["grey", "grey"],
|
||||||
|
"z-index": 5001,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[type="ACTION"]`,
|
||||||
|
css: {
|
||||||
|
shape: "roundrectangle",
|
||||||
|
"background-color": "#213243",
|
||||||
|
"border-color": "#81c784",
|
||||||
|
"background-width": "100%",
|
||||||
|
"background-height": "100%",
|
||||||
|
"border-radius": "5px",
|
||||||
|
"z-index": 5001,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[type="COMMENT"]`,
|
||||||
|
css: {
|
||||||
|
shape: "roundrectangle",
|
||||||
|
color: "data(color)",
|
||||||
|
width: "data(width)",
|
||||||
|
height: "data(height)",
|
||||||
|
padding: "0px",
|
||||||
|
margin: "0px",
|
||||||
|
"background-color": "data(backgroundcolor)",
|
||||||
|
"background-image": "data(backgroundimage)",
|
||||||
|
"border-color": "#ffffff",
|
||||||
|
"text-margin-x": "0px",
|
||||||
|
"z-index": 4999,
|
||||||
|
"border-radius": "5px",
|
||||||
|
"background-opacity": "0.5",
|
||||||
|
"text-wrap": "wrap",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[app_name="Shuffle Tools"]`,
|
||||||
|
css: {
|
||||||
|
width: "30px",
|
||||||
|
height: "30px",
|
||||||
|
"z-index": 5000,
|
||||||
|
"font-size": "0px",
|
||||||
|
"background-width": "75%",
|
||||||
|
"background-height": "75%",
|
||||||
|
"background-color": "data(iconBackground)",
|
||||||
|
"background-fill": "data(fillstyle)",
|
||||||
|
"background-gradient-direction": "to-right",
|
||||||
|
"background-gradient-stop-colors": "data(fillGradient)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[app_name="Testing"]`,
|
||||||
|
css: {
|
||||||
|
width: "30px",
|
||||||
|
height: "30px",
|
||||||
|
"z-index": 5000,
|
||||||
|
"font-size": "0px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[?small_image]`,
|
||||||
|
css: {
|
||||||
|
"background-image": "data(small_image)",
|
||||||
|
"text-halign": "right",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[?large_image]`,
|
||||||
|
css: {
|
||||||
|
"background-image": "data(large_image)",
|
||||||
|
"text-halign": "right",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[type="CONDITION"]`,
|
||||||
|
css: {
|
||||||
|
shape: "diamond",
|
||||||
|
"border-color": "##FFEB3B",
|
||||||
|
padding: "30px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[type="eventAction"]`,
|
||||||
|
css: {
|
||||||
|
"background-color": "#edbd21",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[type="TRIGGER"]`,
|
||||||
|
css: {
|
||||||
|
shape: "octagon",
|
||||||
|
"border-radius": "5px",
|
||||||
|
"border-color": "orange",
|
||||||
|
"background-color": "#213243",
|
||||||
|
"background-width": "100%",
|
||||||
|
"background-height": "100%",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[status="running"]`,
|
||||||
|
css: {
|
||||||
|
"border-color": "#81c784",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[status="stopped"]`,
|
||||||
|
css: {
|
||||||
|
"border-color": "orange",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: 'node[type="mq"]',
|
||||||
|
css: {
|
||||||
|
"background-color": "#edbd21",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "node[?isButton]",
|
||||||
|
css: {
|
||||||
|
shape: "ellipse",
|
||||||
|
width: "15px",
|
||||||
|
height: "15px",
|
||||||
|
"z-index": "5002",
|
||||||
|
"font-size": "0px",
|
||||||
|
border: "1px solid rgba(255,255,255,0.9)",
|
||||||
|
"background-image": "data(icon)",
|
||||||
|
"background-color": "data(iconBackground)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "node[?isSuggestion]",
|
||||||
|
css: {
|
||||||
|
shape: "ellipse",
|
||||||
|
width: "50px",
|
||||||
|
height: "50px",
|
||||||
|
"z-index": "5002",
|
||||||
|
"font-size": "0px",
|
||||||
|
border: "1px solid rgba(255,255,255,0.9)",
|
||||||
|
"background-image": "data(large_image)",
|
||||||
|
"background-color": "data(iconBackground)",
|
||||||
|
label: "data(label)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "node[?canConnect]",
|
||||||
|
css: {
|
||||||
|
"border-color": "#f86a3e",
|
||||||
|
"border-width": "10px",
|
||||||
|
"z-index": "5002",
|
||||||
|
"background-color": "#f86a3e",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "node[?isDescriptor]",
|
||||||
|
css: {
|
||||||
|
shape: "ellipse",
|
||||||
|
"border-color": "#80deea",
|
||||||
|
width: "5px",
|
||||||
|
height: "5px",
|
||||||
|
"z-index": "5002",
|
||||||
|
"font-size": "10px",
|
||||||
|
"text-valign": "center",
|
||||||
|
"text-halign": "center",
|
||||||
|
border: "1px solid black",
|
||||||
|
"margin-right": "0px",
|
||||||
|
"text-margin-x": "0px",
|
||||||
|
"background-color": "data(imageColor)",
|
||||||
|
"background-image": "data(image)",
|
||||||
|
label: "data(label)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "node[?isStartNode]",
|
||||||
|
css: {
|
||||||
|
shape: "ellipse",
|
||||||
|
"border-color": "#80deea",
|
||||||
|
width: "80px",
|
||||||
|
height: "80px",
|
||||||
|
"font-size": "18px",
|
||||||
|
"background-width": "100%",
|
||||||
|
"background-height": "100%",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "node[!is_valid]",
|
||||||
|
css: {
|
||||||
|
"border-color": "red",
|
||||||
|
"border-width": "10px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ":selected",
|
||||||
|
css: {
|
||||||
|
"background-color": "#77b0d0",
|
||||||
|
"border-color": "#77b0d0",
|
||||||
|
"border-width": "20px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".skipped-highlight",
|
||||||
|
css: {
|
||||||
|
"background-color": "grey",
|
||||||
|
"border-color": "grey",
|
||||||
|
"border-width": "8px",
|
||||||
|
"transition-property": "background-color",
|
||||||
|
"transition-duration": "0.5s",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".success-highlight",
|
||||||
|
css: {
|
||||||
|
"background-color": "#41dcab",
|
||||||
|
"border-color": "#41dcab",
|
||||||
|
"border-width": "5px",
|
||||||
|
"transition-property": "background-color",
|
||||||
|
"transition-duration": "0.5s",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".hover-highlight",
|
||||||
|
css: {
|
||||||
|
"background-color": "#5f9265",
|
||||||
|
"border-color": "#5f9265",
|
||||||
|
"border-width": "5px",
|
||||||
|
"transition-property": "background-color",
|
||||||
|
"transition-duration": "0.5s",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".failure-highlight",
|
||||||
|
css: {
|
||||||
|
"background-color": "#8e3530",
|
||||||
|
"border-color": "#8e3530",
|
||||||
|
"border-width": "5px",
|
||||||
|
"transition-property": "background-color",
|
||||||
|
"transition-duration": "0.5s",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".not-executing-highlight",
|
||||||
|
css: {
|
||||||
|
"background-color": "grey",
|
||||||
|
"border-color": "grey",
|
||||||
|
"border-width": "5px",
|
||||||
|
"transition-property": "#ffef47",
|
||||||
|
"transition-duration": "0.25s",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".executing-highlight",
|
||||||
|
css: {
|
||||||
|
"background-color": "#ffef47",
|
||||||
|
"border-color": "#ffef47",
|
||||||
|
"border-width": "8px",
|
||||||
|
"transition-property": "border-width",
|
||||||
|
"transition-duration": "0.25s",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".awaiting-data-highlight",
|
||||||
|
css: {
|
||||||
|
"background-color": "#f4ad42",
|
||||||
|
"border-color": "#f4ad42",
|
||||||
|
"border-width": "5px",
|
||||||
|
"transition-property": "border-color",
|
||||||
|
"transition-duration": "0.5s",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".shuffle-hover-highlight",
|
||||||
|
css: {
|
||||||
|
"background-color": "#f85a3e",
|
||||||
|
"border-color": "#f85a3e",
|
||||||
|
"border-width": "12px",
|
||||||
|
"transition-property": "border-width",
|
||||||
|
"transition-duration": "0.25s",
|
||||||
|
label: "data(label)",
|
||||||
|
"font-size": "18px",
|
||||||
|
color: "white",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "$node > node",
|
||||||
|
css: {
|
||||||
|
"padding-top": "10px",
|
||||||
|
"padding-left": "10px",
|
||||||
|
"padding-bottom": "10px",
|
||||||
|
"padding-right": "10px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "edge.executing-highlight",
|
||||||
|
css: {
|
||||||
|
width: "5px",
|
||||||
|
"target-arrow-color": "#ffef47",
|
||||||
|
"line-color": "#ffef47",
|
||||||
|
"transition-property": "line-color, width",
|
||||||
|
"transition-duration": "0.25s",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `edge[?decorator]`,
|
||||||
|
css: {
|
||||||
|
width: "1px",
|
||||||
|
"line-style": "dashed",
|
||||||
|
"line-fill": "linear-gradient",
|
||||||
|
"target-arrow-color": "#f34079",
|
||||||
|
"line-gradient-stop-positions": ["0.0", "100"],
|
||||||
|
"line-gradient-stop-colors": ["#f86a3e", "#f34079"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "edge.success-highlight",
|
||||||
|
css: {
|
||||||
|
width: "5px",
|
||||||
|
"target-arrow-color": "#41dcab",
|
||||||
|
"line-color": "#41dcab",
|
||||||
|
"transition-property": "line-color, width",
|
||||||
|
"transition-duration": "0.5s",
|
||||||
|
"line-fill": "linear-gradient",
|
||||||
|
"line-gradient-stop-positions": ["0.0", "100"],
|
||||||
|
"line-gradient-stop-colors": ["#41dcab", "#41dcab"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".eh-handle",
|
||||||
|
style: {
|
||||||
|
"background-color": "#337ab7",
|
||||||
|
width: "1px",
|
||||||
|
height: "1px",
|
||||||
|
shape: "circle",
|
||||||
|
"border-width": "1px",
|
||||||
|
"border-color": "black",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".eh-source",
|
||||||
|
style: {
|
||||||
|
"border-width": "3",
|
||||||
|
"border-color": "#337ab7",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".eh-target",
|
||||||
|
style: {
|
||||||
|
"border-width": "3",
|
||||||
|
"border-color": "#337ab7",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".eh-preview, .eh-ghost-edge",
|
||||||
|
style: {
|
||||||
|
"background-color": "#337ab7",
|
||||||
|
"line-color": "#337ab7",
|
||||||
|
"target-arrow-color": "#337ab7",
|
||||||
|
"source-arrow-color": "#337ab7",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "edge:selected",
|
||||||
|
css: {
|
||||||
|
"target-arrow-color": "#f85a3e",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `edge[?source_workflow]`,
|
||||||
|
css: {
|
||||||
|
"background-opacity": "1",
|
||||||
|
"font-size": "0px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[?source_workflow]`,
|
||||||
|
css: {
|
||||||
|
"background-opacity": "0",
|
||||||
|
"font-size": "0px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "node:selected",
|
||||||
|
css: {
|
||||||
|
"border-color": "#f86a3e",
|
||||||
|
"border-width": "7px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
//{
|
||||||
|
// selector: 'edge[?hasErrors]',
|
||||||
|
// css: {
|
||||||
|
// 'target-arrow-color': '#991818',
|
||||||
|
// 'line-color': '#991818',
|
||||||
|
// 'line-style': 'dashed',
|
||||||
|
// "line-fill": "linear-gradient",
|
||||||
|
// "line-gradient-stop-positions": ["0.0", "100"],
|
||||||
|
// "line-gradient-stop-colors": ["#991818", "#991818"],
|
||||||
|
// },
|
||||||
|
//},
|
||||||
|
|
||||||
|
export default data;
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
const data = [{
|
||||||
|
selector: 'node',
|
||||||
|
css: {
|
||||||
|
'label': 'data(label)',
|
||||||
|
'text-valign': 'center',
|
||||||
|
'font-family': 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif, sans-serif',
|
||||||
|
'font-weight': 'lighter',
|
||||||
|
'font-size': 'data(font_size)',
|
||||||
|
'text-algin': 'center',
|
||||||
|
'border-width': '3px',
|
||||||
|
'border-color': '#8a8a8a',
|
||||||
|
'color': '#f85a3e',
|
||||||
|
'text-margin-x': '0px',
|
||||||
|
'text-margin-y': 'data(text_margin_y)',
|
||||||
|
'background-color': '#27292d',
|
||||||
|
'background-image': 'data(large_image)',
|
||||||
|
'background-position-x': 'data(margin_x)',
|
||||||
|
'background-position-y': 'data(margin_y)',
|
||||||
|
'background-clip': "node",
|
||||||
|
'background-width': 'data(width)',
|
||||||
|
'background-height': 'data(width)',
|
||||||
|
'width': 'data(boxwidth)',
|
||||||
|
'height': 'data(boxheight)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: 'edge',
|
||||||
|
css: {
|
||||||
|
'target-arrow-shape': 'triangle',
|
||||||
|
'target-arrow-color': '#8a8a8a',
|
||||||
|
'curve-style': 'bezier',
|
||||||
|
'label': 'data(label)',
|
||||||
|
'text-wrap': 'wrap',
|
||||||
|
'text-max-width': '120px',
|
||||||
|
"color": "rgba(255,255,255,0.7)",
|
||||||
|
'line-style': 'dashed',
|
||||||
|
"line-fill": "linear-gradient",
|
||||||
|
"line-gradient-stop-positions": ["0.0", "100"],
|
||||||
|
"line-gradient-stop-colors": ["#8a8a8a", "#8a8a8a"],
|
||||||
|
'width': '1px',
|
||||||
|
'z-compound-depth': 'top',
|
||||||
|
'font-size': '13px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[!is_valid]`,
|
||||||
|
css: {
|
||||||
|
'height': '20px',
|
||||||
|
'width': '20px',
|
||||||
|
'background-color': '#6d9eeb',
|
||||||
|
'border-color': '#4c6ea4',
|
||||||
|
'border-width': '1px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `edge[?human]`,
|
||||||
|
css: {
|
||||||
|
'target-arrow-color': '#6d9eeb',
|
||||||
|
'line-style': 'solid',
|
||||||
|
"line-gradient-stop-positions": ["0.0", "100"],
|
||||||
|
"line-gradient-stop-colors": ["#6d9eeb", "#6d9eeb"],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[?middle_node]`,
|
||||||
|
css: {
|
||||||
|
'background-image': 'data(large_image)',
|
||||||
|
'height': 'data(width)',
|
||||||
|
'width': 'data(height)',
|
||||||
|
'background-width': 'data(width)',
|
||||||
|
'background-height': 'data(height)',
|
||||||
|
'background-position-x': '0px',
|
||||||
|
'background-position-y': '0px',
|
||||||
|
'border-width': '2px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[?invisible]`,
|
||||||
|
css: {
|
||||||
|
'height': '10x',
|
||||||
|
'width': '10px',
|
||||||
|
'background-position-x': '0px',
|
||||||
|
'background-position-y': '0px',
|
||||||
|
'border-width': '0px',
|
||||||
|
'font-size': '0px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: `node[?font_size]`,
|
||||||
|
css: {
|
||||||
|
'font-size': 'data(font_size)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: ".eh-preview, .eh-ghost-edge",
|
||||||
|
style: {
|
||||||
|
"background-color": "#337ab7",
|
||||||
|
"line-color": "#337ab7",
|
||||||
|
"target-arrow-color": "#337ab7",
|
||||||
|
"source-arrow-color": "#337ab7",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "node:selected",
|
||||||
|
css: {
|
||||||
|
"border-color": "#f86a3e",
|
||||||
|
"border-width": "3px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default data
|
||||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,759 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useInterval } from "react-powerhooks";
|
||||||
|
import { makeStyles, useTheme } from "@material-ui/core/styles";
|
||||||
|
// nodejs library that concatenates classes
|
||||||
|
import classNames from "classnames";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
import { useNavigate, Link, useParams } from "react-router-dom";
|
||||||
|
|
||||||
|
// react plugin used to create charts
|
||||||
|
//import { Line, Bar } from "react-chartjs-2";
|
||||||
|
import { useAlert } from "react-alert";
|
||||||
|
import Autocomplete from "@material-ui/lab/Autocomplete";
|
||||||
|
import Draggable from "react-draggable";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TextField,
|
||||||
|
IconButton,
|
||||||
|
Button,
|
||||||
|
Typography,
|
||||||
|
Grid,
|
||||||
|
Paper,
|
||||||
|
Chip,
|
||||||
|
Checkbox,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Close as CloseIcon,
|
||||||
|
DoneAll as DoneAllIcon,
|
||||||
|
Description as DescriptionIcon,
|
||||||
|
PlayArrow as PlayArrowIcon,
|
||||||
|
Edit as EditIcon,
|
||||||
|
CheckBox as CheckBoxIcon,
|
||||||
|
CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon,
|
||||||
|
OpenInNew as OpenInNewIcon,
|
||||||
|
} from "@material-ui/icons";
|
||||||
|
|
||||||
|
import WorkflowPaper from "../components/WorkflowPaper.jsx"
|
||||||
|
import { removeParam } from "../views/AngularWorkflow.jsx"
|
||||||
|
|
||||||
|
// core components
|
||||||
|
//import {
|
||||||
|
// chartExample1,
|
||||||
|
// chartExample2,
|
||||||
|
// chartExample3,
|
||||||
|
// chartExample4,
|
||||||
|
//} from "../charts.js";
|
||||||
|
|
||||||
|
import {
|
||||||
|
RadialBarChart,
|
||||||
|
RadialAreaChart,
|
||||||
|
RadialAxis,
|
||||||
|
StackedBarSeries,
|
||||||
|
TooltipArea,
|
||||||
|
ChartTooltip,
|
||||||
|
TooltipTemplate,
|
||||||
|
RadialAreaSeries,
|
||||||
|
RadialPointSeries,
|
||||||
|
RadialArea,
|
||||||
|
RadialLine,
|
||||||
|
TreeMap,
|
||||||
|
TreeMapSeries,
|
||||||
|
TreeMapLabel,
|
||||||
|
TreeMapRect,
|
||||||
|
Line,
|
||||||
|
LineChart,
|
||||||
|
LineSeries,
|
||||||
|
LinearYAxis,
|
||||||
|
LinearXAxis,
|
||||||
|
LinearYAxisTickSeries,
|
||||||
|
LinearXAxisTickSeries,
|
||||||
|
AreaChart,
|
||||||
|
AreaSeries,
|
||||||
|
PointSeries,
|
||||||
|
} from 'reaviz';
|
||||||
|
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
notchedOutline: {
|
||||||
|
borderColor: "#f85a3e !important",
|
||||||
|
},
|
||||||
|
root: {
|
||||||
|
"& .MuiAutocomplete-listbox": {
|
||||||
|
border: "2px solid #f85a3e",
|
||||||
|
color: "white",
|
||||||
|
fontSize: 18,
|
||||||
|
"& li:nth-child(even)": {
|
||||||
|
backgroundColor: "#CCC",
|
||||||
|
},
|
||||||
|
"& li:nth-child(odd)": {
|
||||||
|
backgroundColor: "#FFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
inputRoot: {
|
||||||
|
color: "white",
|
||||||
|
// This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
|
||||||
|
"&:hover .MuiOutlinedInput-notchedOutline": {
|
||||||
|
borderColor: "#f86a3e",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputdata = [
|
||||||
|
{
|
||||||
|
"key": "Threat Intel",
|
||||||
|
"value": 18,
|
||||||
|
"x": "2020-02-17T08:00:00.000Z",
|
||||||
|
"x0": "2020-02-17T08:00:00.000Z",
|
||||||
|
"x1": "2020-02-17T08:00:00.000Z",
|
||||||
|
"y": 18,
|
||||||
|
"y0": 0,
|
||||||
|
"y1": 18
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "Threat Intel",
|
||||||
|
"value": 3,
|
||||||
|
"x": "2020-02-21T08:00:00.000Z",
|
||||||
|
"x0": "2020-02-21T08:00:00.000Z",
|
||||||
|
"x1": "2020-02-21T08:00:00.000Z",
|
||||||
|
"y": 3,
|
||||||
|
"y0": 0,
|
||||||
|
"y1": 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "Threat Intel",
|
||||||
|
"value": 14,
|
||||||
|
"x": "2020-02-26T08:00:00.000Z",
|
||||||
|
"x0": "2020-02-26T08:00:00.000Z",
|
||||||
|
"x1": "2020-02-26T08:00:00.000Z",
|
||||||
|
"y": 14,
|
||||||
|
"y0": 0,
|
||||||
|
"y1": 14
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "Threat Intel",
|
||||||
|
"value": 18,
|
||||||
|
"x": "2020-02-29T08:00:00.000Z",
|
||||||
|
"x0": "2020-02-29T08:00:00.000Z",
|
||||||
|
"x1": "",
|
||||||
|
"y": 18,
|
||||||
|
"y0": 0,
|
||||||
|
"y1": 18
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const LineChartWrapper = ({keys, height, width}) => {
|
||||||
|
const [hovered, setHovered] = useState("");
|
||||||
|
|
||||||
|
//console.log("Date: ", new Date("2019-11-14T08:00:00.000Z"))
|
||||||
|
console.log("Keys: ", keys)
|
||||||
|
var inputdata = keys.data
|
||||||
|
|
||||||
|
/*
|
||||||
|
const inputdata = [{
|
||||||
|
"key": "Intel",
|
||||||
|
"data": [
|
||||||
|
{ key: new Date('11/22/2019'), data: 3, metadata: {color: "orange", "name": "Intel"}},
|
||||||
|
{ key: new Date('11/24/2019'), data: 8, metadata: {color: "orange", "name": "Intel"}},
|
||||||
|
{ key: new Date('11/29/2019'), data: 2, metadata: {color: "orange", "name": "Intel"}},
|
||||||
|
]},
|
||||||
|
{
|
||||||
|
"key": "Popper",
|
||||||
|
"data": [
|
||||||
|
{ key: new Date('11/24/2019'), data: 9, },
|
||||||
|
{ key: new Date('11/29/2019'), data: 3, },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
*/
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{}}>
|
||||||
|
<Typography variant="h6" style={{marginBotton: 15}}>
|
||||||
|
{keys.title}
|
||||||
|
</Typography>
|
||||||
|
<AreaChart
|
||||||
|
style={{marginTop: 15}}
|
||||||
|
height={height}
|
||||||
|
width={width}
|
||||||
|
data={inputdata}
|
||||||
|
series={
|
||||||
|
<AreaSeries
|
||||||
|
type="grouped"
|
||||||
|
symbols={
|
||||||
|
<PointSeries show={true} />
|
||||||
|
}
|
||||||
|
colorScheme={(colorInput) => {
|
||||||
|
var color = "cybertron"
|
||||||
|
if (colorInput !== undefined && colorInput.length > 0) {
|
||||||
|
color = colorInput[0].metadata !== undefined && colorInput[0].metadata.color !== undefined ? colorInput[0].metadata.color : color
|
||||||
|
}
|
||||||
|
|
||||||
|
return color
|
||||||
|
}}
|
||||||
|
tooltip={
|
||||||
|
<TooltipArea
|
||||||
|
color={"#000000"}
|
||||||
|
style={{
|
||||||
|
backgroundColor: "red",
|
||||||
|
}}
|
||||||
|
isRadial={true}
|
||||||
|
onValueEnter={(event) => {
|
||||||
|
if (hovered !== event.value.x) {
|
||||||
|
//setHovered(event.value.x)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
tooltip={
|
||||||
|
<ChartTooltip
|
||||||
|
followCursor={true}
|
||||||
|
modifiers={{
|
||||||
|
offset: '5px, 5px'
|
||||||
|
}}
|
||||||
|
content={(data, color) => {
|
||||||
|
console.log("DATA: ", data)
|
||||||
|
const name = data.metadata !== undefined && data.metadata.name !== undefined ? data.metadata.name : "No"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{borderRadius: theme.palette.borderRadius, backgroundColor: theme.palette.inputColor, border: "1px solid rgba(255,255,255,0.3)", color: "white", padding: 5, cursor: "pointer",}}>
|
||||||
|
<Typography variant="body1">
|
||||||
|
{name}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
/*
|
||||||
|
<TooltipTemplate
|
||||||
|
color={"#ffffff"}
|
||||||
|
value={{
|
||||||
|
x: data.x,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const RadialChart = ({keys, setSelectedCategory}) => {
|
||||||
|
const [hovered, setHovered] = useState("");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{cursor: "pointer",}} onClick={() => {
|
||||||
|
console.log("Click: ", hovered)
|
||||||
|
if (setSelectedCategory !== undefined) {
|
||||||
|
setSelectedCategory(hovered)
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<RadialAreaChart
|
||||||
|
id="workflow_categories"
|
||||||
|
height={500}
|
||||||
|
width={500}
|
||||||
|
data={keys}
|
||||||
|
axis={<RadialAxis type="category" />}
|
||||||
|
series={
|
||||||
|
<RadialAreaSeries
|
||||||
|
interpolation="smooth"
|
||||||
|
colorScheme={(colorInput) => {
|
||||||
|
return '#f86a3e'
|
||||||
|
}}
|
||||||
|
animated={false}
|
||||||
|
id="workflow_series_id"
|
||||||
|
style={{cursor: "pointer",}}
|
||||||
|
line={
|
||||||
|
<RadialLine
|
||||||
|
color={"#000000"}
|
||||||
|
data={(data, color) => {
|
||||||
|
console.log("INFO: ", data, color)
|
||||||
|
return (
|
||||||
|
null
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
tooltip={
|
||||||
|
<TooltipArea
|
||||||
|
color={"#000000"}
|
||||||
|
style={{
|
||||||
|
backgroundColor: "red",
|
||||||
|
}}
|
||||||
|
isRadial={true}
|
||||||
|
onValueEnter={(event) => {
|
||||||
|
if (hovered !== event.value.x) {
|
||||||
|
setHovered(event.value.x)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
tooltip={
|
||||||
|
<ChartTooltip
|
||||||
|
followCursor={true}
|
||||||
|
modifiers={{
|
||||||
|
offset: '5px, 5px'
|
||||||
|
}}
|
||||||
|
content={(data, color) => {
|
||||||
|
return (
|
||||||
|
<div style={{borderRadius: theme.palette.borderRadius, backgroundColor: theme.palette.inputColor, border: "1px solid rgba(255,255,255,0.3)", color: "white", padding: 5, cursor: "pointer",}}>
|
||||||
|
<Typography variant="body1">
|
||||||
|
{data.x}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
/*
|
||||||
|
<TooltipTemplate
|
||||||
|
color={"#ffffff"}
|
||||||
|
value={{
|
||||||
|
x: data.x,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
//axis={<RadialAxis type="category" />}
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is the start of a dashboard that can be used.
|
||||||
|
// What data do we fill in here? Idk
|
||||||
|
const Dashboard = (props) => {
|
||||||
|
const { globalUrl, isLoggedIn } = props;
|
||||||
|
const alert = useAlert();
|
||||||
|
const [bigChartData, setBgChartData] = useState("data1");
|
||||||
|
const [dayAmount, setDayAmount] = useState(7);
|
||||||
|
const [firstRequest, setFirstRequest] = useState(true);
|
||||||
|
const [stats, setStats] = useState({});
|
||||||
|
const [changeme, setChangeme] = useState("");
|
||||||
|
const [statsRan, setStatsRan] = useState(false);
|
||||||
|
const [keys, setKeys] = useState([])
|
||||||
|
const [treeKeys, setTreeKeys] = useState([])
|
||||||
|
|
||||||
|
const [selectedUsecaseCategory, setSelectedUsecaseCategory] = useState("");
|
||||||
|
const [selectedUsecases, setSelectedUsecases] = useState([]);
|
||||||
|
const [usecases, setUsecases] = useState([]);
|
||||||
|
const [workflows, setWorkflows] = useState([]);
|
||||||
|
const [frameworkData, setFrameworkData] = useState(undefined);
|
||||||
|
|
||||||
|
const [widgetData, setWidgetData] = useState([]);
|
||||||
|
|
||||||
|
let navigate = useNavigate();
|
||||||
|
const isCloud =
|
||||||
|
window.location.host === "localhost:3002" ||
|
||||||
|
window.location.host === "shuffler.io";
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedUsecaseCategory.length === 0) {
|
||||||
|
setSelectedUsecases(usecases)
|
||||||
|
} else {
|
||||||
|
const foundUsecase = usecases.find(data => data.name === selectedUsecaseCategory)
|
||||||
|
if (foundUsecase !== undefined && foundUsecase !== null) {
|
||||||
|
setSelectedUsecases([foundUsecase])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [selectedUsecaseCategory])
|
||||||
|
|
||||||
|
const checkSelectedParams = () => {
|
||||||
|
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||||
|
const params = Object.fromEntries(urlSearchParams.entries())
|
||||||
|
|
||||||
|
const curpath = typeof window === "undefined" || window.location === undefined ? "" : window.location.pathname;
|
||||||
|
const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
|
||||||
|
|
||||||
|
const foundQuery = params["selected"]
|
||||||
|
if (foundQuery !== null && foundQuery !== undefined) {
|
||||||
|
setSelectedUsecaseCategory(foundQuery)
|
||||||
|
|
||||||
|
const newitem = removeParam("selected", cursearch);
|
||||||
|
navigate(curpath + newitem)
|
||||||
|
}
|
||||||
|
|
||||||
|
const foundQuery2 = params["selected_object"]
|
||||||
|
if (foundQuery2 !== null && foundQuery2 !== undefined) {
|
||||||
|
console.log("Got selected_object: ", foundQuery2)
|
||||||
|
|
||||||
|
const queryName = foundQuery2.toLowerCase().replaceAll("_", " ")
|
||||||
|
// Waiting a bit for it to render
|
||||||
|
setTimeout(() => {
|
||||||
|
const foundItem = document.getElementById(queryName)
|
||||||
|
if (foundItem !== undefined && foundItem !== null) {
|
||||||
|
foundItem.click()
|
||||||
|
} else {
|
||||||
|
//console.log("Couldn't find item with name ", queryName)
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (usecases.length > 0) {
|
||||||
|
console.log(usecases)
|
||||||
|
checkSelectedParams()
|
||||||
|
}
|
||||||
|
}, [usecases])
|
||||||
|
|
||||||
|
const getWidget = (dashboard, widget) => {
|
||||||
|
fetch(`${globalUrl}/api/v1/dashboards/${dashboard}/widgets/${widget}`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for framework!");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
console.log("Resp: ", responseJson)
|
||||||
|
if (responseJson.success === false) {
|
||||||
|
if (responseJson.reason !== undefined) {
|
||||||
|
//alert.error("Failed loading: " + responseJson.reason)
|
||||||
|
} else {
|
||||||
|
//alert.error("Failed to load framework for your org.")
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
var tmpdata = responseJson
|
||||||
|
for (var key in tmpdata.data) {
|
||||||
|
for (var subkey in tmpdata.data[key].data) {
|
||||||
|
tmpdata.data[key].data[subkey].key = new Date(tmpdata.data[key].data[subkey].key)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const foundWidget = widgetData.findIndex(data => data.title === widget)
|
||||||
|
console.log("Found: ", foundWidget)
|
||||||
|
if (foundWidget !== undefined && foundWidget !== null && foundWidget >= 0) {
|
||||||
|
widgetData[foundWidget] = tmpdata
|
||||||
|
} else {
|
||||||
|
widgetData.push(tmpdata)
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Data: ", widgetData)
|
||||||
|
setWidgetData(widgetData)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
//alert.error(error.toString());
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
document.title = "Shuffle - Dashboard";
|
||||||
|
var dayGraphLabels = [60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130];
|
||||||
|
var dayGraphData = [60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130];
|
||||||
|
|
||||||
|
const handleKeysetting = (categorydata) => {
|
||||||
|
var allCategories = []
|
||||||
|
var treeCategories = []
|
||||||
|
for (key in categorydata) {
|
||||||
|
const category = categorydata[key]
|
||||||
|
allCategories.push({"key": category.name, "data": category.list.length, "color": category.color})
|
||||||
|
treeCategories.push({"key": category.name, "data": 100, "color": category.color,})
|
||||||
|
for (var subkey in category.list) {
|
||||||
|
treeCategories.push({"key": category.list[subkey].name, "data": 20, "color": category.color})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setKeys(allCategories)
|
||||||
|
setTreeKeys(treeCategories)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getWidget("main", "Overall")
|
||||||
|
getWidget("main", "Overall2")
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchdata = (stats_id) => {
|
||||||
|
fetch(globalUrl + "/api/v1/stats/" + stats_id, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for " + stats_id);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
stats[stats_id] = responseJson;
|
||||||
|
setStats(stats);
|
||||||
|
// Used to force updates
|
||||||
|
setChangeme(stats_id);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
//alert.error("ERROR: " + error.toString());
|
||||||
|
console.log("ERROR: " + error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
let chart1_2_options = {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
legend: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
backgroundColor: "#f5f5f5",
|
||||||
|
titleFontColor: "#333",
|
||||||
|
bodyFontColor: "#666",
|
||||||
|
bodySpacing: 4,
|
||||||
|
xPadding: 12,
|
||||||
|
mode: "nearest",
|
||||||
|
intersect: 0,
|
||||||
|
position: "nearest",
|
||||||
|
},
|
||||||
|
responsive: true,
|
||||||
|
scales: {
|
||||||
|
yAxes: [
|
||||||
|
{
|
||||||
|
barPercentage: 1.6,
|
||||||
|
gridLines: {
|
||||||
|
drawBorder: false,
|
||||||
|
color: "rgba(29,140,248,0.0)",
|
||||||
|
zeroLineColor: "transparent",
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
suggestedMin: 60,
|
||||||
|
suggestedMax: 125,
|
||||||
|
padding: 20,
|
||||||
|
fontColor: "#9a9a9a",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xAxes: [
|
||||||
|
{
|
||||||
|
barPercentage: 1.6,
|
||||||
|
gridLines: {
|
||||||
|
drawBorder: false,
|
||||||
|
color: "rgba(29,140,248,0.1)",
|
||||||
|
zeroLineColor: "transparent",
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
padding: 20,
|
||||||
|
fontColor: "#9a9a9a",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const dayGraph = {
|
||||||
|
data: (canvas) => {
|
||||||
|
let ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
let gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
|
||||||
|
|
||||||
|
gradientStroke.addColorStop(1, "rgba(29,140,248,0.2)");
|
||||||
|
gradientStroke.addColorStop(0.4, "rgba(29,140,248,0.0)");
|
||||||
|
gradientStroke.addColorStop(0, "rgba(29,140,248,0)"); //blue colors
|
||||||
|
|
||||||
|
return {
|
||||||
|
labels: dayGraphLabels,
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: "My First dataset",
|
||||||
|
fill: true,
|
||||||
|
backgroundColor: gradientStroke,
|
||||||
|
borderColor: "#1f8ef1",
|
||||||
|
borderWidth: 2,
|
||||||
|
borderDash: [],
|
||||||
|
borderDashOffset: 0.0,
|
||||||
|
pointBackgroundColor: "#1f8ef1",
|
||||||
|
pointBorderColor: "rgba(255,255,255,0)",
|
||||||
|
pointHoverBackgroundColor: "#1f8ef1",
|
||||||
|
pointBorderWidth: 20,
|
||||||
|
pointHoverRadius: 4,
|
||||||
|
pointHoverBorderWidth: 15,
|
||||||
|
pointRadius: 4,
|
||||||
|
data: dayGraphData,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
options: chart1_2_options,
|
||||||
|
};
|
||||||
|
|
||||||
|
// All these are currently tracked.
|
||||||
|
const variables = [
|
||||||
|
"backend_executions",
|
||||||
|
"workflow_executions",
|
||||||
|
"workflow_executions_aborted",
|
||||||
|
"workflow_executions_success",
|
||||||
|
"total_apps_created",
|
||||||
|
"total_apps_loaded",
|
||||||
|
"openapi_apps_created",
|
||||||
|
"total_apps_deleted",
|
||||||
|
"total_webhooks_ran",
|
||||||
|
"total_workflows",
|
||||||
|
"total_workflow_actions",
|
||||||
|
"total_workflow_triggers",
|
||||||
|
];
|
||||||
|
|
||||||
|
const runUpdate = () => {
|
||||||
|
for (var key in variables) {
|
||||||
|
fetchdata(variables[key]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Refresh every 60 seconds
|
||||||
|
const autoUpdate = 60000;
|
||||||
|
const { start, stop } = useInterval({
|
||||||
|
duration: autoUpdate,
|
||||||
|
startImmediate: false,
|
||||||
|
callback: () => {
|
||||||
|
runUpdate();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (firstRequest) {
|
||||||
|
setFirstRequest(false);
|
||||||
|
//start();
|
||||||
|
//runUpdate();
|
||||||
|
} else if (!statsRan) {
|
||||||
|
// FIXME: Run this under runUpdate schedule?
|
||||||
|
// 1. Fix labels in dayGraphy.data
|
||||||
|
// 2. Add data to the daygraph
|
||||||
|
|
||||||
|
// Every time there's an update :)
|
||||||
|
|
||||||
|
// This should probably be done in the backend.. bleh
|
||||||
|
if (
|
||||||
|
stats["workflow_executions"] !== undefined &&
|
||||||
|
stats["workflow_executions"] !== null &&
|
||||||
|
stats["workflow_executions"].data !== undefined
|
||||||
|
) {
|
||||||
|
setStatsRan(true);
|
||||||
|
//console.log("NEW DATA?: ", stats)
|
||||||
|
console.log("SET WORKFLOW: ", stats["workflow_executions"]);
|
||||||
|
//var curday = startDate.getDate()
|
||||||
|
|
||||||
|
// Index = what day are we on
|
||||||
|
|
||||||
|
// 0 = today
|
||||||
|
var newDayGraphLabels = [];
|
||||||
|
var newDayGraphData = [];
|
||||||
|
for (var i = dayAmount; i > 0; i--) {
|
||||||
|
var enddate = new Date();
|
||||||
|
enddate.setDate(-i);
|
||||||
|
enddate.setHours(23, 59, 59, 999);
|
||||||
|
|
||||||
|
var startdate = new Date();
|
||||||
|
startdate.setDate(-i);
|
||||||
|
startdate.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
var endtime = enddate.getTime() / 1000;
|
||||||
|
var starttime = startdate.getTime() / 1000;
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
"START: ",
|
||||||
|
starttime,
|
||||||
|
"END: ",
|
||||||
|
endtime,
|
||||||
|
"Data: ",
|
||||||
|
stats["workflow_executions"]
|
||||||
|
);
|
||||||
|
for (var key in stats["workflow_executions"].data) {
|
||||||
|
const item = stats["workflow_executions"]["data"][key];
|
||||||
|
console.log("ITEM: ", item.timestamp, endtime);
|
||||||
|
console.log(endtime - starttime);
|
||||||
|
if (
|
||||||
|
endtime - starttime > endtime - item.timestamp &&
|
||||||
|
endtime.timestamp >= 0
|
||||||
|
) {
|
||||||
|
console.log("HIT? ");
|
||||||
|
}
|
||||||
|
console.log(item.timestamp - endtime);
|
||||||
|
//console.log(item.timestamp-endtime)
|
||||||
|
break;
|
||||||
|
if (item.timestamp > endtime && item.timestamp < starttime) {
|
||||||
|
if (newDayGraphData[i - 1] === undefined) {
|
||||||
|
newDayGraphData[i - 1] = 1;
|
||||||
|
} else {
|
||||||
|
newDayGraphData[i - 1] += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
//break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
newDayGraphLabels.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(newDayGraphLabels);
|
||||||
|
console.log(newDayGraphData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const newdata =
|
||||||
|
Object.getOwnPropertyNames(stats).length > 0 ? (
|
||||||
|
<div>
|
||||||
|
Autoupdate every {autoUpdate / 1000} seconds
|
||||||
|
{variables.map((data) => {
|
||||||
|
if (stats[data] === undefined || stats[data] === null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (stats[data].total === undefined) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{data}: {stats[data].total}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
const data = (
|
||||||
|
<div className="content" style={{width: 1000, margin: "auto", paddingBottom: 200, textAlign: "center",}}>
|
||||||
|
<div style={{width: 500, margin: "auto"}}>
|
||||||
|
{keys.length > 0 ?
|
||||||
|
<span>
|
||||||
|
<RadialChart keys={keys} setSelectedCategory={setSelectedUsecaseCategory} />
|
||||||
|
</span>
|
||||||
|
: null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{widgetData === undefined || widgetData === null || widgetData === [] || widgetData.length === 0 ? null :
|
||||||
|
<Draggable>
|
||||||
|
<Paper style={{height: 350, width: 500, padding: "15px 15px 15px 15px", }}>
|
||||||
|
<LineChartWrapper keys={widgetData[0]} height={280} width={470} />
|
||||||
|
</Paper>
|
||||||
|
</Draggable>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const dataWrapper = (
|
||||||
|
<div style={{ maxWidth: 1366, margin: "auto" }}>{data}</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return dataWrapper;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Dashboard;
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import ReactDOM from "react-dom"
|
||||||
|
|
||||||
|
import AppFramework from "../components/AppFramework.jsx";
|
||||||
|
import { useAlert } from "react-alert";
|
||||||
|
import { Link, useParams } from "react-router-dom";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
const Framework = (props) => {
|
||||||
|
const {globalUrl, isLoaded, isLoggedIn, showOptions, selectedOption, rolling, } = props;
|
||||||
|
|
||||||
|
const alert = useAlert()
|
||||||
|
const [frameworkLoaded, setFrameworkLoaded] = useState(false)
|
||||||
|
const [frameworkData, setFrameworkData] = useState()
|
||||||
|
|
||||||
|
const getFramework = () => {
|
||||||
|
fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for framework!");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson.success === false) {
|
||||||
|
if (responseJson.reason !== undefined) {
|
||||||
|
alert.error("Failed loading: " + responseJson.reason)
|
||||||
|
} else {
|
||||||
|
alert.error("Failed to load framework for your org.")
|
||||||
|
}
|
||||||
|
|
||||||
|
setFrameworkLoaded(true)
|
||||||
|
} else {
|
||||||
|
ReactDOM.unstable_batchedUpdates(() => {
|
||||||
|
setFrameworkData(responseJson)
|
||||||
|
setFrameworkLoaded(true)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
setFrameworkLoaded(true)
|
||||||
|
alert.error(error.toString());
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getFramework()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={{marginBottom: 25, marginTop: 25, width: 300, margin: "auto", textAlign: "center",}}>
|
||||||
|
<Link style={{textDecoration: "none", }} to="/getting-started">
|
||||||
|
<Button variant="outlined" color="secondary">
|
||||||
|
Back to getting started
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
{frameworkLoaded === true && isLoaded ?
|
||||||
|
<AppFramework
|
||||||
|
frameworkData={frameworkData}
|
||||||
|
selectedOption={"Draw"}
|
||||||
|
showOptions={false}
|
||||||
|
|
||||||
|
isLoaded={isLoaded}
|
||||||
|
isLoggedIn={isLoggedIn}
|
||||||
|
globalUrl={globalUrl}
|
||||||
|
/>
|
||||||
|
: null}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Framework;
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,795 @@
|
|||||||
|
/* eslint-disable react/no-multi-comp */
|
||||||
|
import React, {useState, useEffect} from 'react';
|
||||||
|
import ReactDOM from "react-dom"
|
||||||
|
|
||||||
|
import { useInterval } from "react-powerhooks";
|
||||||
|
import { makeStyles } from '@material-ui/styles';
|
||||||
|
import { useNavigate, Link, useParams } from "react-router-dom";
|
||||||
|
import {isMobile} from "react-device-detect";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
import { validateJson, GetIconInfo } from "./Workflows.jsx";
|
||||||
|
import { green, yellow } from "./AngularWorkflow.jsx";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
IconButton,
|
||||||
|
CircularProgress,
|
||||||
|
TextField,
|
||||||
|
Button,
|
||||||
|
ButtonGroup,
|
||||||
|
Paper,
|
||||||
|
Typography,
|
||||||
|
Divider,
|
||||||
|
} from '@material-ui/core';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Preview as PreviewIcon,
|
||||||
|
ContentCopy as ContentCopyIcon,
|
||||||
|
} from '@mui/icons-material';
|
||||||
|
|
||||||
|
const hrefStyle = {
|
||||||
|
color: "white",
|
||||||
|
textDecoration: "none"
|
||||||
|
}
|
||||||
|
|
||||||
|
const bodyDivStyle = {
|
||||||
|
margin: "auto",
|
||||||
|
marginTop: 100,
|
||||||
|
width: isMobile? "100%":"500px",
|
||||||
|
position: "relative",
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const RunWorkflow = (defaultprops) => {
|
||||||
|
const { globalUrl, isLoaded, isLoggedIn, setIsLoggedIn, setCookie, register, serverside } = defaultprops;
|
||||||
|
|
||||||
|
let navigate = useNavigate();
|
||||||
|
const [message, setMessage] = useState("");
|
||||||
|
const [workflow, setWorkflow] = React.useState({});
|
||||||
|
const [executionRequest, setExecutionRequest] = React.useState({});
|
||||||
|
const [executionArgument, setExecutionArgument] = useState("");
|
||||||
|
const [executionLoading, setExecutionLoading] = useState(false);
|
||||||
|
const [executionData, setExecutionData] = React.useState({});
|
||||||
|
const [executionRunning, setExecutionRunning] = useState(false);
|
||||||
|
const [workflowQuestion, setWorkflowQuestion] = useState("");
|
||||||
|
const [selectedOrganization, setSelectedOrganization] = React.useState(undefined);
|
||||||
|
const [apps, setApps] = React.useState([]);
|
||||||
|
const [buttonClicked, setButtonClicked] = React.useState("");
|
||||||
|
|
||||||
|
const boxStyle = {
|
||||||
|
color: "white",
|
||||||
|
paddingLeft: "30px",
|
||||||
|
paddingRight: "30px",
|
||||||
|
paddingBottom: "30px",
|
||||||
|
paddingTop: "30px",
|
||||||
|
backgroundColor: theme.palette.surfaceColor,
|
||||||
|
marginBottom: 150,
|
||||||
|
}
|
||||||
|
|
||||||
|
const params = useParams();
|
||||||
|
var props = JSON.parse(JSON.stringify(defaultprops))
|
||||||
|
props.match = {}
|
||||||
|
props.match.params = params
|
||||||
|
|
||||||
|
const defaultTitle = "Run Workflow"
|
||||||
|
if (document != undefined && document.title != defaultTitle) {
|
||||||
|
document.title = defaultTitle
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedsearch = serverside === true ? "" : window.location.search
|
||||||
|
if (serverside !== true) {
|
||||||
|
const tmpMessage = new URLSearchParams(window.location.search).get("message")
|
||||||
|
if (tmpMessage !== undefined && tmpMessage !== null && message !== tmpMessage) {
|
||||||
|
setMessage(tmpMessage)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Used to swap from login to register. True = login, false = register
|
||||||
|
|
||||||
|
// Error messages etc
|
||||||
|
const [executionInfo, setExecutionInfo] = useState("");
|
||||||
|
|
||||||
|
const handleValidateForm = (executionArgument) => {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const getApps = () => {
|
||||||
|
fetch(globalUrl + "/api/v1/apps", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
setApps(responseJson)
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.log("App error: ", error);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const ShowExecutionResults = (props) => {
|
||||||
|
const { executionData } = props;
|
||||||
|
|
||||||
|
if (executionData === undefined || executionData === null || executionData === {}) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const executionMargin = 20
|
||||||
|
const defaultReturn =
|
||||||
|
<div style={{marginTop: executionMargin, }}>
|
||||||
|
<Typography variant="h6" style={{color: theme.palette.primaryColor}}>
|
||||||
|
No results yet
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
if (executionData.results === undefined || executionData.results === null) {
|
||||||
|
return defaultReturn
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{marginTop: executionMargin, }}>
|
||||||
|
<Typography variant="h6" style={{color: theme.palette.primaryColor}}>
|
||||||
|
Results
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{executionData.results.map((data, index) => {
|
||||||
|
if (executionData.results.length !== 1 && (data.status === "SKIPPED")) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// FIXME: The latter replace doens't really work if ' is used in a string
|
||||||
|
var showResult = data.result.trim();
|
||||||
|
const validate = validateJson(showResult);
|
||||||
|
|
||||||
|
const curapp = apps.find((a) => a.name === data.action.app_name && a.app_version === data.action.app_version);
|
||||||
|
const imgsize = 50;
|
||||||
|
const statusColor = data.status === "FINISHED" || data.status === "SUCCESS" ? green : data.status === "ABORTED" || data.status === "FAILURE" ? "red" : yellow;
|
||||||
|
|
||||||
|
var imgSrc = curapp === undefined ? "" : curapp.large_image;
|
||||||
|
if (
|
||||||
|
imgSrc.length === 0 &&
|
||||||
|
workflow.actions !== undefined &&
|
||||||
|
workflow.actions !== null
|
||||||
|
) {
|
||||||
|
// Look for the node in the workflow
|
||||||
|
const action = workflow.actions.find(
|
||||||
|
(action) => action.id === data.action.id
|
||||||
|
);
|
||||||
|
if (action !== undefined && action !== null) {
|
||||||
|
imgSrc = action.large_image;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var actionimg =
|
||||||
|
curapp === null ? null : (
|
||||||
|
<img
|
||||||
|
alt={data.action.app_name}
|
||||||
|
src={imgSrc}
|
||||||
|
style={{
|
||||||
|
marginRight: 20,
|
||||||
|
width: imgsize,
|
||||||
|
height: imgsize,
|
||||||
|
border: `2px solid ${statusColor}`,
|
||||||
|
borderRadius:
|
||||||
|
executionData.start === data.action.id ? 25 : 5,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (data.action.app_name === "shuffle-subflow") {
|
||||||
|
//const parsedImage = triggers[2].large_image;
|
||||||
|
//actionimg = (
|
||||||
|
// <img
|
||||||
|
// alt={"Shuffle Subflow"}
|
||||||
|
// src={parsedImage}
|
||||||
|
// style={{
|
||||||
|
// marginRight: 20,
|
||||||
|
// width: imgsize,
|
||||||
|
// height: imgsize,
|
||||||
|
// border: `2px solid ${statusColor}`,
|
||||||
|
// borderRadius:
|
||||||
|
// executionData.start === data.action.id ? 25 : 5,
|
||||||
|
// }}
|
||||||
|
// />
|
||||||
|
//);
|
||||||
|
} else if (data.action.app_name === "User Input") {
|
||||||
|
//actionimg = (
|
||||||
|
// <img
|
||||||
|
// alt={"Shuffle Subflow"}
|
||||||
|
// src={triggers[3].large_image}
|
||||||
|
// style={{
|
||||||
|
// marginRight: 20,
|
||||||
|
// width: imgsize,
|
||||||
|
// height: imgsize,
|
||||||
|
// border: `2px solid ${statusColor}`,
|
||||||
|
// borderRadius:
|
||||||
|
// executionData.start === data.action.id ? 25 : 5,
|
||||||
|
// }}
|
||||||
|
// />
|
||||||
|
//);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (validate.valid && typeof validate.result === "string") {
|
||||||
|
validate.result = JSON.parse(validate.result);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (validate.valid && typeof validate.result === "object") {
|
||||||
|
if (
|
||||||
|
validate.result.result !== undefined &&
|
||||||
|
validate.result.result !== null
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
validate.result.result = JSON.parse(validate.result.result);
|
||||||
|
} catch (e) {
|
||||||
|
//console.log("ERROR PARSING: ", e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var similarActionsView = null
|
||||||
|
if (data.similar_actions !== undefined && data.similar_actions !== null) {
|
||||||
|
var minimumMatch = 85
|
||||||
|
var matching_executions = []
|
||||||
|
if (data.similar_actions !== undefined && data.similar_actions !== null) {
|
||||||
|
for (let [k,kval] in Object.entries(data.similar_actions)){
|
||||||
|
if (data.similar_actions.hasOwnProperty(k)) {
|
||||||
|
if (data.similar_actions[k].similarity > minimumMatch) {
|
||||||
|
matching_executions.push(data.similar_actions[k].execution_id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (matching_executions.length !== 0) {
|
||||||
|
var parsed_url = matching_executions.join(",")
|
||||||
|
|
||||||
|
similarActionsView =
|
||||||
|
<Tooltip
|
||||||
|
color="primary"
|
||||||
|
title="See executions with similar results (not identical)"
|
||||||
|
placement="top"
|
||||||
|
style={{ zIndex: 50000, marginLeft: 50, }}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
style={{
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
height: 30,
|
||||||
|
paddingLeft: 0,
|
||||||
|
width: 30,
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
navigate(`?execution_highlight=${parsed_url}`)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PreviewIcon style={{ color: "rgba(255,255,255,0.5)" }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
style={{
|
||||||
|
marginBottom: 20,
|
||||||
|
border:
|
||||||
|
data.action.sub_action === true
|
||||||
|
? "1px solid rgba(255,255,255,0.3)"
|
||||||
|
: "1px solid rgba(255,255,255, 0.3)",
|
||||||
|
borderRadius: theme.palette.borderRadius,
|
||||||
|
backgroundColor: theme.palette.inputColor,
|
||||||
|
padding: "15px 10px 10px 10px",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
onMouseOver={() => {
|
||||||
|
}}
|
||||||
|
onMouseOut={() => {
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ marginBottom: 5, display: "flex" }}>
|
||||||
|
<Typography variant="body1">
|
||||||
|
<b>Status </b>
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1" color="textSecondary" style={{ marginRight: 15, }}>
|
||||||
|
{data.status}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSubmit = (execution_id, authorization, answer) => {
|
||||||
|
stop()
|
||||||
|
setMessage("")
|
||||||
|
setExecutionLoading(true)
|
||||||
|
setExecutionData({})
|
||||||
|
setExecutionInfo("")
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
"execution_argument": executionArgument
|
||||||
|
}
|
||||||
|
|
||||||
|
var url = `${globalUrl}/api/v1/workflows/${props.match.params.key}/execute`
|
||||||
|
var fetchBody = {
|
||||||
|
mode: 'cors',
|
||||||
|
credentials: 'include',
|
||||||
|
crossDomain: true,
|
||||||
|
withCredentials: true,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json; charset=utf-8',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
|
||||||
|
url += `?reference_execution=${execution_id}&authorization=${authorization}&answer=${answer}`
|
||||||
|
data = {}
|
||||||
|
fetchBody.method = "GET"
|
||||||
|
} else {
|
||||||
|
fetchBody.method = "POST"
|
||||||
|
fetchBody.body = JSON.stringify(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(url, fetchBody)
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200 && response.status !== 201) {
|
||||||
|
|
||||||
|
if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
|
||||||
|
setExecutionLoading(false)
|
||||||
|
setExecutionRunning(true);
|
||||||
|
setExecutionRequest({
|
||||||
|
"execution_id": execution_id,
|
||||||
|
"authorization": authorization,
|
||||||
|
})
|
||||||
|
|
||||||
|
start();
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(responseJson => {
|
||||||
|
setExecutionLoading(false)
|
||||||
|
if (responseJson["success"] === false) {
|
||||||
|
console.log("Failed sending execution request")
|
||||||
|
} else {
|
||||||
|
console.log("Started execution")
|
||||||
|
|
||||||
|
if (answer !== undefined && answer !== null) {
|
||||||
|
console.log("Skipping start")
|
||||||
|
} else {
|
||||||
|
setExecutionRunning(true);
|
||||||
|
setExecutionRequest(responseJson)
|
||||||
|
start();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
//setExecutionInfo("Error in workflow startup: " + error)
|
||||||
|
setExecutionLoading(false)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getWorkflow = (workflow_id) => {
|
||||||
|
fetch(globalUrl + "/api/v1/workflows/" + workflow_id, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for workflows :O!");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
// Not sure why this is necessary.
|
||||||
|
if (responseJson.isValid === undefined) {
|
||||||
|
responseJson.isValid = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (responseJson.errors === undefined) {
|
||||||
|
responseJson.errors = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (responseJson.actions === undefined || responseJson.actions === null) {
|
||||||
|
responseJson.actions = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (responseJson.triggers === undefined || responseJson.triggers === null) {
|
||||||
|
responseJson.triggers = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
handleGetOrg(responseJson.org_id)
|
||||||
|
setWorkflow(responseJson);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log("Get workflow error: ", error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const { start, stop } = useInterval({
|
||||||
|
duration: 3000,
|
||||||
|
startImmediate: true,
|
||||||
|
callback: () => {
|
||||||
|
fetchUpdates(executionRequest.execution_id, executionRequest.authorization)
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleUpdateResults = (responseJson, executionRequest) => {
|
||||||
|
if (responseJson === undefined || responseJson === null || responseJson.success === false) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Got response: ", responseJson)
|
||||||
|
|
||||||
|
ReactDOM.unstable_batchedUpdates(() => {
|
||||||
|
if (JSON.stringify(responseJson) !== JSON.stringify(executionData)) {
|
||||||
|
// FIXME: If another is selected, don't edit..
|
||||||
|
// Doesn't work because this is some async garbage
|
||||||
|
if (executionData.execution_id === undefined || (responseJson.execution_id === executionData.execution_id && responseJson.results !== undefined && responseJson.results !== null)) {
|
||||||
|
if (executionData.status !== responseJson.status || executionData.result !== responseJson.result || (executionData.results !== undefined && responseJson.results !== null && executionData.results.length !== responseJson.results.length)) {
|
||||||
|
console.log("Updating data!")
|
||||||
|
setExecutionData(responseJson)
|
||||||
|
|
||||||
|
for (var key in responseJson.results) {
|
||||||
|
if (responseJson.results[key].status === "WAITING") {
|
||||||
|
console.log("Found: ", responseJson.results[key])
|
||||||
|
|
||||||
|
const validate = validateJson(responseJson.results[key].result)
|
||||||
|
console.log("Validate: ", validate)
|
||||||
|
if (validate.valid && typeof validate.result === "string") {
|
||||||
|
validate.result = JSON.parse(validate.result)
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Newresult: ", validate.result)
|
||||||
|
if (validate.result["information"] !== undefined && validate.result["information"] !== null) {
|
||||||
|
setWorkflowQuestion(validate.result["information"])
|
||||||
|
}
|
||||||
|
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log("NOT updating executiondata state.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (responseJson.status === "ABORTED" || responseJson.status === "STOPPED" || responseJson.status === "FAILURE" || responseJson.status === "WAITING") {
|
||||||
|
stop();
|
||||||
|
|
||||||
|
if (executionRunning) {
|
||||||
|
setExecutionRunning(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
//getWorkflowExecution(props.match.params.key, "");
|
||||||
|
} else if (responseJson.status === "FINISHED") {
|
||||||
|
setExecutionRunning(false)
|
||||||
|
stop();
|
||||||
|
//getWorkflowExecution(props.match.params.key, "");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleGetOrg = (orgId, execution_id, authorization) => {
|
||||||
|
if (orgId.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Just use this one?
|
||||||
|
var url = execution_id !== undefined && authorization !== undefined ? `${globalUrl}/api/v1/orgs/${orgId}?reference_execution=${execution_id}&authorization=${authorization}` : `${globalUrl}/api/v1/orgs/${orgId}`;
|
||||||
|
fetch(url, {
|
||||||
|
method: "GET",
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status === 401) {
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson["success"] === false) {
|
||||||
|
} else {
|
||||||
|
if (responseJson.sync_features === undefined || responseJson.sync_features === null) {
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document != undefined && document.title != defaultTitle) {
|
||||||
|
document.title = responseJson.name + " - " + defaultTitle
|
||||||
|
}
|
||||||
|
setSelectedOrganization(responseJson)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log("Error getting org: ", error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchUpdates = (execution_id, authorization, getorg) => {
|
||||||
|
const innerRequest = {
|
||||||
|
"execution_id": execution_id,
|
||||||
|
"authorization": authorization
|
||||||
|
}
|
||||||
|
|
||||||
|
if (executionRequest.execution_id !== innerRequest.execution_id) {
|
||||||
|
setExecutionRequest(innerRequest)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (execution_id === "" || authorization === "") {
|
||||||
|
setExecutionLoading(false)
|
||||||
|
setExecutionRunning(false)
|
||||||
|
stop()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(globalUrl + "/api/v1/streams/results", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(innerRequest),
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for stream results :O!");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (getorg === true) {
|
||||||
|
handleGetOrg(responseJson.org_id, execution_id, authorization)
|
||||||
|
}
|
||||||
|
|
||||||
|
handleUpdateResults(responseJson, executionRequest);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log("Execution result Error: ", error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const answer = new URLSearchParams(window.location.search).get("answer")
|
||||||
|
const execution_id = new URLSearchParams(window.location.search).get("reference_execution")
|
||||||
|
const authorization = new URLSearchParams(window.location.search).get("authorization")
|
||||||
|
useEffect(() => {
|
||||||
|
getWorkflow(props.match.params.key)
|
||||||
|
if (execution_id !== undefined && execution_id !== null && authorization !== undefined && authorization !== null) {
|
||||||
|
console.log("Get execution: ", execution_id)
|
||||||
|
fetchUpdates(execution_id, authorization, true)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (answer !== undefined && answer !== null) {
|
||||||
|
console.log("Got answer: ", answer)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)"
|
||||||
|
const buttonStyle = {borderRadius: 25, height: 50, fontSize: 18, backgroundImage: handleValidateForm(executionArgument) || executionLoading ? buttonBackground : "grey", color: "white"}
|
||||||
|
|
||||||
|
console.log("execdata: ", executionData)
|
||||||
|
const disabledButtons = message.length > 0 || executionData.status === "FINISHED" || executionData.status === "ABORTED"
|
||||||
|
|
||||||
|
const organization = selectedOrganization !== undefined && selectedOrganization !== null ? selectedOrganization.name : "Unknown"
|
||||||
|
const contact = selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.org !== undefined && selectedOrganization.org !== null? selectedOrganization.org : "support@shuffler.io"
|
||||||
|
//const contact = selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.contact !== undefined && selectedOrganization.contact !== null? selectedOrganization.contact : "support@shuffler.io"
|
||||||
|
|
||||||
|
const image = selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.image !== undefined && selectedOrganization.image !== null && selectedOrganization.image !== "" ? selectedOrganization.image : theme.palette.defaultImage
|
||||||
|
|
||||||
|
console.log("IMG: ", image, "ORG: ", selectedOrganization)
|
||||||
|
|
||||||
|
if (!disabledButtons && answer !== undefined && answer !== null && organization !== "Unknown" && buttonClicked.length === 0) {
|
||||||
|
console.log("Finding button!")
|
||||||
|
// Find the button
|
||||||
|
var buttonid = ""
|
||||||
|
if (answer === "false") {
|
||||||
|
buttonid = "abort_execution"
|
||||||
|
} else if (answer === "true") {
|
||||||
|
buttonid = "continue_execution"
|
||||||
|
}
|
||||||
|
|
||||||
|
if (buttonid !== "") {
|
||||||
|
const foundButton = document.getElementById(buttonid)
|
||||||
|
console.log("Button: ", foundButton)
|
||||||
|
if (foundButton !== undefined && foundButton !== null) {
|
||||||
|
foundButton.click()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const basedata =
|
||||||
|
<div style={bodyDivStyle}>
|
||||||
|
<Paper style={boxStyle}>
|
||||||
|
<form onSubmit={() => {onSubmit()}} style={{margin: "15px 15px 15px 15px"}}>
|
||||||
|
|
||||||
|
<img
|
||||||
|
alt={workflow.name}
|
||||||
|
src={image}
|
||||||
|
style={{
|
||||||
|
marginRight: 20,
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
border: `2px solid ${green}`,
|
||||||
|
borderRadius: 50,
|
||||||
|
position: "absolute",
|
||||||
|
top: -50,
|
||||||
|
left: 200,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Typography variant="h6" style={{marginBottom: 10, marginTop: 50, textAlign: "center", }}>
|
||||||
|
{organization}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1" color="textSecondary" style={{marginBottom: 15, marginTop: 0, textAlign: "center",}}>
|
||||||
|
{contact}
|
||||||
|
</Typography>
|
||||||
|
<Divider style={{marginTop: 20, marginBottom: 20, }}/>
|
||||||
|
<Typography color="textSecondary">{message}</Typography>
|
||||||
|
|
||||||
|
{answer !== undefined && answer !== null ? null :
|
||||||
|
<Typography variant="h6" style={{marginBottom: 15, }}><b>Workflow: </b>{workflow.name}</Typography>
|
||||||
|
}
|
||||||
|
|
||||||
|
{executionData !== undefined && executionData !== null && executionData !== {} && executionData.status !== undefined && (answer === undefined || answer === null) ?
|
||||||
|
<div style={{ marginBottom: 5, display: "flex" }}>
|
||||||
|
<Typography variant="body1">
|
||||||
|
<b>Status </b>
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1" color="textSecondary" style={{ marginRight: 15, }}>
|
||||||
|
{executionData.status}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
: null}
|
||||||
|
|
||||||
|
{workflowQuestion.length > 0 ?
|
||||||
|
<Typography variant="body1" style={{ marginBottom: 35, marginTop: 30, marginRight: 15, textAlign: "center", whiteSpace: "pre-line", }}>
|
||||||
|
{workflowQuestion}
|
||||||
|
</Typography>
|
||||||
|
: null}
|
||||||
|
|
||||||
|
{answer !== undefined && answer !== null ? null :
|
||||||
|
<span>
|
||||||
|
Execution Argument
|
||||||
|
<div style={{marginBottom: 5}}>
|
||||||
|
<TextField
|
||||||
|
color="primary"
|
||||||
|
style={{backgroundColor: theme.palette.inputColor, marginTop: 5, }}
|
||||||
|
multiLine
|
||||||
|
maxRows={2}
|
||||||
|
InputProps={{
|
||||||
|
style:{
|
||||||
|
height: "50px",
|
||||||
|
color: "white",
|
||||||
|
fontSize: "1em",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
fullWidth={true}
|
||||||
|
placeholder=""
|
||||||
|
id="emailfield"
|
||||||
|
margin="normal"
|
||||||
|
variant="outlined"
|
||||||
|
onChange={(e) => {
|
||||||
|
setExecutionArgument(e.target.value)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
{executionRunning ?
|
||||||
|
<span style={{width: 50, height: 50, margin: "auto", alignItems: "center", justifyContent: "center", textAlign: "center", }}>
|
||||||
|
<CircularProgress style={{marginTop: 20, marginBottom: 20, marginLeft: 185, }}/>
|
||||||
|
<Typography variant="body2" style={{margin: "auto", marginTop: 20, marginBottom: 20, textAlign: "center", alignItem: "center", }} color="textSecondary">
|
||||||
|
Status: {executionData.status}
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
:
|
||||||
|
answer !== undefined && answer !== null ?
|
||||||
|
<span style={{marginTop: 20, }}>
|
||||||
|
<Typography variant="body1" style={{textAlign: "center", marginTop: 30, marginBottom: 20, }}>
|
||||||
|
{disabledButtons ? "Already answered. Nothing to do." : ""}
|
||||||
|
</Typography>
|
||||||
|
{disabledButtons ? null :
|
||||||
|
<Typography variant="body2" color="textSecondary" style={{textAlign: "center", marginTop: 10, }}>
|
||||||
|
What do you want to do?
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
<div fullWidth style={{width: "100%", marginTop: 10, marginBottom: 10, display: "flex", }}>
|
||||||
|
<Button fullWidth id="continue_execution" variant="contained" disabled={disabledButtons} color="primary" style={{border: answer === "true" ? "2px solid rgba(255,255,255,0.6)" : null, flex: 1,}} onClick={() => {
|
||||||
|
onSubmit(execution_id, authorization, true)
|
||||||
|
|
||||||
|
setButtonClicked("FINISHED")
|
||||||
|
setExecutionData({
|
||||||
|
status: "FINISHED",
|
||||||
|
})
|
||||||
|
}}>Continue</Button>
|
||||||
|
<Typography variant="body1" style={{marginLeft: 3, marginRight: 3, marginTop: 3, }}>
|
||||||
|
or
|
||||||
|
</Typography>
|
||||||
|
<Button fullWidth id="abort_execution" variant="contained" color="primary" disabled={disabledButtons} style={{border: answer !== "true" ? "2px solid rgba(255,255,255,0.6)" : null, flex: 1, }} onClick={() => {
|
||||||
|
onSubmit(execution_id, authorization, false)
|
||||||
|
|
||||||
|
setButtonClicked("ABORTED")
|
||||||
|
setExecutionData({
|
||||||
|
status: "ABORTED",
|
||||||
|
})
|
||||||
|
}}>Stop</Button>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
:
|
||||||
|
<div style={{display: "flex", marginTop: "15px"}}>
|
||||||
|
<Button variant="contained" type="submit" color="primary" fullWidth disabled={!handleValidateForm(executionArgument) || executionLoading}>
|
||||||
|
{executionLoading ?
|
||||||
|
<CircularProgress color="secondary" style={{color: "white",}} /> : "Run Workflow"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
{buttonClicked !== undefined && buttonClicked !== null && buttonClicked !== "finished" && buttonClicked.length > 0 ?
|
||||||
|
<img id="finalize_gif" src="/images/finalize.gif" alt="finalize workflow animation" style={{width: 150, marginLeft: 125, borderRadius: theme.palette.borderRadius, }}
|
||||||
|
onLoad={() => {
|
||||||
|
console.log("Img loaded.")
|
||||||
|
setTimeout(() => {
|
||||||
|
console.log("Img closing.")
|
||||||
|
setButtonClicked("finished")
|
||||||
|
|
||||||
|
}, 1250)
|
||||||
|
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
: null}
|
||||||
|
|
||||||
|
<div style={{marginTop: "10px"}}>
|
||||||
|
{executionInfo}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{answer !== undefined && answer !== null ? null :
|
||||||
|
<ShowExecutionResults executionData={executionData} />
|
||||||
|
}
|
||||||
|
</form>
|
||||||
|
</Paper>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
const loadedCheck = isLoaded ?
|
||||||
|
<div>
|
||||||
|
{basedata}
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{loadedCheck}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RunWorkflow;
|
||||||
@@ -0,0 +1,190 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
import {isMobile} from "react-device-detect";
|
||||||
|
import AppGrid from "../components/AppGrid.jsx"
|
||||||
|
import WorkflowGrid from "../components/WorkflowGrid.jsx"
|
||||||
|
import CreatorGrid from "../components/CreatorGrid.jsx"
|
||||||
|
import DocsGrid from "../components/DocsGrid.jsx"
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Tabs,
|
||||||
|
Tab,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Apps as AppsIcon,
|
||||||
|
Polymer as PolymerIcon,
|
||||||
|
EmojiObjects as EmojiObjectsIcon,
|
||||||
|
Description as DescriptionIcon,
|
||||||
|
} from "@material-ui/icons";
|
||||||
|
|
||||||
|
|
||||||
|
const bodyDivStyle = {
|
||||||
|
margin: "auto",
|
||||||
|
maxWidth: 1024,
|
||||||
|
scrollX: "hidden",
|
||||||
|
overflowX: "hidden",
|
||||||
|
}
|
||||||
|
|
||||||
|
// Should be different if logged in :|
|
||||||
|
const Search = (props) => {
|
||||||
|
const { globalUrl, isLoaded, serverside, userdata, hidemargins, } = props;
|
||||||
|
let navigate = useNavigate();
|
||||||
|
|
||||||
|
const [curTab, setCurTab] = useState(0);
|
||||||
|
const iconStyle = { marginRight: 10 };
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (serverside !== true && 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) {
|
||||||
|
for (var key in Object.keys(views)) {
|
||||||
|
const value = views[key]
|
||||||
|
console.log(key, value)
|
||||||
|
if (value === foundTab) {
|
||||||
|
setConfig("", key)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
if (serverside === true) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const boxStyle = {
|
||||||
|
color: "white",
|
||||||
|
flex: "1",
|
||||||
|
marginLeft: 10,
|
||||||
|
marginRight: 10,
|
||||||
|
paddingLeft: 30,
|
||||||
|
paddingRight: 30,
|
||||||
|
paddingBottom: 30,
|
||||||
|
paddingTop: hidemargins === true ? 0 : 30,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
overflowX: "hidden",
|
||||||
|
minHeight: 400,
|
||||||
|
}
|
||||||
|
|
||||||
|
const views = {
|
||||||
|
0: "apps",
|
||||||
|
1: "workflows",
|
||||||
|
2: "docs",
|
||||||
|
3: "creators",
|
||||||
|
}
|
||||||
|
|
||||||
|
const setConfig = (event, inputValue) => {
|
||||||
|
const newValue = parseInt(inputValue)
|
||||||
|
|
||||||
|
setCurTab(newValue)
|
||||||
|
if (newValue === 0) {
|
||||||
|
document.title = "Shuffle - search - apps";
|
||||||
|
} else if (newValue === 1) {
|
||||||
|
document.title = "Shuffle - search - workflows";
|
||||||
|
} else if (newValue === 2) {
|
||||||
|
document.title = "Shuffle - search - documentation";
|
||||||
|
} else if (newValue === 3) {
|
||||||
|
document.title = "Shuffle - search - creators";
|
||||||
|
} else {
|
||||||
|
document.title = "Shuffle - search";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||||
|
const params = Object.fromEntries(urlSearchParams.entries())
|
||||||
|
const foundQuery = params["q"]
|
||||||
|
var extraQ = ""
|
||||||
|
if (foundQuery !== null && foundQuery !== undefined) {
|
||||||
|
extraQ = "&q="+foundQuery
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if ((serverside === false || serverside === undefined) && window.location.pathname.includes("/search")) {
|
||||||
|
navigate(`/search?tab=${views[newValue]}`+extraQ)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoaded === false) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Random names for type & autoComplete. Didn't research :^)
|
||||||
|
const landingpageDataBrowser =
|
||||||
|
<div style={{paddingBottom: hidemargins === true ? 0 : 100, color: "white", }}>
|
||||||
|
<div style={boxStyle}>
|
||||||
|
<Tabs
|
||||||
|
style={{width: 610, margin: "auto", marginTop: hidemargins === true ? 0 : 25, }}
|
||||||
|
value={curTab}
|
||||||
|
indicatorColor="primary"
|
||||||
|
textColor="secondary"
|
||||||
|
onChange={setConfig}
|
||||||
|
aria-label="disabled tabs example"
|
||||||
|
variant="scrollable"
|
||||||
|
scrollButtons="auto"
|
||||||
|
>
|
||||||
|
<Tab
|
||||||
|
label=<span>
|
||||||
|
<AppsIcon style={iconStyle} /> Apps
|
||||||
|
</span>
|
||||||
|
/>
|
||||||
|
<Tab
|
||||||
|
label=<span>
|
||||||
|
<PolymerIcon style={iconStyle} /> Workflows
|
||||||
|
</span>
|
||||||
|
/>
|
||||||
|
<Tab
|
||||||
|
label=<span>
|
||||||
|
<DescriptionIcon style={iconStyle} /> Docs
|
||||||
|
</span>
|
||||||
|
/>
|
||||||
|
<Tab
|
||||||
|
label=<span>
|
||||||
|
<EmojiObjectsIcon style={iconStyle} /> Creators
|
||||||
|
</span>
|
||||||
|
/>
|
||||||
|
</Tabs>
|
||||||
|
{curTab === 0 ?
|
||||||
|
<AppGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
|
||||||
|
:
|
||||||
|
curTab === 1 ?
|
||||||
|
window.location.pathname === "/search" ?
|
||||||
|
<WorkflowGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
|
||||||
|
:
|
||||||
|
<WorkflowGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
|
||||||
|
:
|
||||||
|
curTab === 2 ?
|
||||||
|
<DocsGrid maxRows={6} parsedXs={12} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
|
||||||
|
:
|
||||||
|
curTab === 3 ?
|
||||||
|
<CreatorGrid parsedXs={4} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
|
||||||
|
:
|
||||||
|
null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
//{/*alternativeView={true} />*/}
|
||||||
|
|
||||||
|
const loadedCheck = isLoaded ?
|
||||||
|
<div>
|
||||||
|
<div style={bodyDivStyle}>{landingpageDataBrowser}</div>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
// #1f2023?
|
||||||
|
return(
|
||||||
|
<div style={{}}>
|
||||||
|
{loadedCheck}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Search;
|
||||||
@@ -0,0 +1,172 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
import ReactGA from "react-ga4";
|
||||||
|
import {
|
||||||
|
Typography,
|
||||||
|
CircularProgress,
|
||||||
|
Button,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
import { useAlert } from "react-alert";
|
||||||
|
|
||||||
|
import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
|
||||||
|
import AuthenticationWindow from "../components/AuthenticationWindow.jsx";
|
||||||
|
import { base64_decode, appCategories } from "../views/AppCreator.jsx";
|
||||||
|
|
||||||
|
const SetAuthentication = (props) => {
|
||||||
|
const { globalUrl, serverside } = props;
|
||||||
|
|
||||||
|
const [app, setApp] = useState({});
|
||||||
|
const [isAppLoaded, setIsAppLoaded] = useState(false);
|
||||||
|
const [loadFail, setLoadFail] = useState("");
|
||||||
|
const [appAuthentication, setAppAuthentication] = React.useState([]);
|
||||||
|
|
||||||
|
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
|
||||||
|
const alert = useAlert();
|
||||||
|
|
||||||
|
const parseIncomingOpenapiData = (data) => {
|
||||||
|
if (data.app === undefined || data.app === null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Should basically always be true if openapi exists too
|
||||||
|
var parsedBaseapp = ""
|
||||||
|
try {
|
||||||
|
parsedBaseapp = base64_decode(data.app)
|
||||||
|
} catch (e) {
|
||||||
|
console.log("Failed JSON parsing: ", e)
|
||||||
|
parsedBaseapp = data
|
||||||
|
}
|
||||||
|
|
||||||
|
var parsedapp = JSON.parse(parsedBaseapp)
|
||||||
|
parsedapp.name = parsedapp.name.replaceAll("_", " ");
|
||||||
|
setApp(parsedapp);
|
||||||
|
|
||||||
|
document.title = parsedapp.name + " App Auth";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("App: ", app)
|
||||||
|
|
||||||
|
const getApp = (appid) => {
|
||||||
|
if (serverside === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(`${globalUrl}/api/v1/apps/${appid}/config`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"Accept": "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
if (isCloud) {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "appauth",
|
||||||
|
action: `app_not_found`,
|
||||||
|
label: appid,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (isCloud) {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "appauth",
|
||||||
|
action: `app_found`,
|
||||||
|
label: appid,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson.success === false || responseJson.success === undefined) {
|
||||||
|
alert.error("Failed to get the app. Does it exist?")
|
||||||
|
setIsAppLoaded(true)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
parseIncomingOpenapiData(responseJson);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert.error("Error in app fetch: " + error.toString());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Find the ID for the app from the "app_id" query
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const appid = urlParams.get("app_id");
|
||||||
|
if (appid === null) {
|
||||||
|
setLoadFail(
|
||||||
|
<span>
|
||||||
|
<Typography variant="h4">
|
||||||
|
Failed to load the app. Please contact your provider or support@shuffler.io if this persists
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
>
|
||||||
|
Reload Window
|
||||||
|
</Button>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
getApp(appid);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Handle:
|
||||||
|
// 1. Check for org_id, authentication, and app keys in queries
|
||||||
|
// 2. Load the app auth info from the orgs' apps
|
||||||
|
// 3. Help them set info for the app
|
||||||
|
// Make sure to test both private and public apps
|
||||||
|
|
||||||
|
const appname = app.name !== undefined ? app.name : "";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{width: 1000, margin: "auto", marginTop: 50, }}>
|
||||||
|
{loadFail !== "" ?
|
||||||
|
loadFail
|
||||||
|
:
|
||||||
|
<div>
|
||||||
|
<Typography variant="h4" style={{marginBottom: 20,}}>
|
||||||
|
Configure {appname} Authentication
|
||||||
|
</Typography>
|
||||||
|
{app.authentication === undefined || app.authentication === null || app.authentication.length === 0 ?
|
||||||
|
null
|
||||||
|
:
|
||||||
|
app.authentication.type === "oauth2" ?
|
||||||
|
<AuthenticationOauth2
|
||||||
|
selectedApp={app}
|
||||||
|
selectedAction={{
|
||||||
|
"app_name": app.name,
|
||||||
|
"app_id": app.id,
|
||||||
|
"app_version": app.version,
|
||||||
|
"large_image": app.large_image,
|
||||||
|
}}
|
||||||
|
authenticationType={app.authentication}
|
||||||
|
isCloud={true}
|
||||||
|
authButtonOnly={true}
|
||||||
|
getAppAuthentication={undefined}
|
||||||
|
/>
|
||||||
|
:
|
||||||
|
<AuthenticationWindow
|
||||||
|
globalUrl={globalUrl}
|
||||||
|
selectedApp={app}
|
||||||
|
authFieldsOnly={true}
|
||||||
|
getAppAuthentication={undefined}
|
||||||
|
appAuthentication={appAuthentication}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SetAuthentication;
|
||||||
@@ -0,0 +1,544 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import ReactGA from 'react-ga4';
|
||||||
|
import WelcomeForm2 from "../components/WelcomeForm2.jsx";
|
||||||
|
import Stepper from "@material-ui/core/Stepper";
|
||||||
|
import Step from "@material-ui/core/Step";
|
||||||
|
import StepLabel from "@material-ui/core/StepLabel";
|
||||||
|
import AppFramework from "../components/AppFramework.jsx";
|
||||||
|
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
||||||
|
import {
|
||||||
|
Grid,
|
||||||
|
Container,
|
||||||
|
Fade,
|
||||||
|
Typography,
|
||||||
|
Paper,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardActionArea,
|
||||||
|
} from '@mui/material';
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
import { useNavigate, Link } from "react-router-dom";
|
||||||
|
import Drift from "react-driftjs";
|
||||||
|
|
||||||
|
const Welcome = (props) => {
|
||||||
|
const { globalUrl, surfaceColor, newColor, mini, inputColor, userdata, isLoggedIn, isLoaded, serverside } = props;
|
||||||
|
const [skipped, setSkipped] = React.useState(new Set());
|
||||||
|
const [inputUsecase, setInputUsecase] = useState({});
|
||||||
|
const [frameworkData, setFrameworkData] = useState(undefined);
|
||||||
|
const [discoveryWrapper, setDiscoveryWrapper] = useState(undefined);
|
||||||
|
const [activeStep, setActiveStep] = React.useState(1);
|
||||||
|
const [apps, setApps] = React.useState([]);
|
||||||
|
const [defaultSearch, setDefaultSearch] = React.useState("")
|
||||||
|
const [selectionOpen, setSelectionOpen] = React.useState(false)
|
||||||
|
const [showWelcome, setShowWelcome] = React.useState(false)
|
||||||
|
const [usecases, setUsecases] = React.useState([]);
|
||||||
|
const [workflows, setWorkflows] = React.useState([]);
|
||||||
|
|
||||||
|
let navigate = useNavigate();
|
||||||
|
//if (serverside === false && isLoaded === true && isLoggedIn === false) {
|
||||||
|
// console.log("Redirecting to login?")
|
||||||
|
// console.log(window.location.pathname)
|
||||||
|
// console.log(window.location)
|
||||||
|
// navigate(`/login?view=${window.location.pathname}${window.location.search}`)
|
||||||
|
//}
|
||||||
|
|
||||||
|
const isCloud =
|
||||||
|
window.location.host === "localhost:3002" ||
|
||||||
|
window.location.host === "shuffler.io";
|
||||||
|
|
||||||
|
const [steps, setSteps] = useState([
|
||||||
|
"Help us get to know you",
|
||||||
|
"Find your Apps",
|
||||||
|
"Discover Usecases",
|
||||||
|
])
|
||||||
|
|
||||||
|
|
||||||
|
const handleKeysetting = (categorydata, workflows) => {
|
||||||
|
//workflows[0].category = ["detect"]
|
||||||
|
//workflows[0].usecase_ids = ["Correlate tickets"]
|
||||||
|
|
||||||
|
if (workflows !== undefined && workflows !== null) {
|
||||||
|
var newcategories = []
|
||||||
|
for (var key in categorydata) {
|
||||||
|
var category = categorydata[key]
|
||||||
|
category.matches = []
|
||||||
|
|
||||||
|
for (var subcategorykey in category.list) {
|
||||||
|
var subcategory = category.list[subcategorykey]
|
||||||
|
subcategory.matches = []
|
||||||
|
|
||||||
|
for (var workflowkey in workflows) {
|
||||||
|
const workflow = workflows[workflowkey]
|
||||||
|
|
||||||
|
if (workflow.usecase_ids !== undefined && workflow.usecase_ids !== null) {
|
||||||
|
for (var usecasekey in workflow.usecase_ids) {
|
||||||
|
|
||||||
|
if (workflow.usecase_ids[usecasekey].toLowerCase() === subcategory.name.toLowerCase()) {
|
||||||
|
//console.log("Got match: ", workflow.usecase_ids[usecasekey])
|
||||||
|
|
||||||
|
category.matches.push({
|
||||||
|
"workflow": workflow.id,
|
||||||
|
"category": subcategory.name,
|
||||||
|
})
|
||||||
|
subcategory.matches.push(workflow.id)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (subcategory.matches.length > 0) {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
newcategories.push(category)
|
||||||
|
}
|
||||||
|
|
||||||
|
setUsecases(newcategories)
|
||||||
|
} else {
|
||||||
|
setUsecases(categorydata)
|
||||||
|
}
|
||||||
|
|
||||||
|
setWorkflows(workflows)
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchUsecases = (workflows) => {
|
||||||
|
fetch(globalUrl + "/api/v1/workflows/usecases", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for usecases");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json()
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson.success !== false) {
|
||||||
|
handleKeysetting(responseJson, workflows)
|
||||||
|
} else {
|
||||||
|
//setWorkflows(workflows);
|
||||||
|
//setWorkflowDone(true);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log("Usecase error: " + error.toString())
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const getAvailableWorkflows = () => {
|
||||||
|
fetch(globalUrl + "/api/v1/workflows", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for workflows :O!: ", response.status);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson !== undefined) {
|
||||||
|
var newarray = []
|
||||||
|
for (var key in responseJson) {
|
||||||
|
const wf = responseJson[key]
|
||||||
|
if (wf.public === true) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
newarray.push(wf)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Workflows are set in here
|
||||||
|
fetchUsecases(newarray)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log("err in get workflows: ", error.toString());
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFramework = () => {
|
||||||
|
fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for framework!");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
if (responseJson.success === false) {
|
||||||
|
setFrameworkData({})
|
||||||
|
|
||||||
|
if (responseJson.reason !== undefined) {
|
||||||
|
//alert.error("Failed loading: " + responseJson.reason)
|
||||||
|
} else {
|
||||||
|
//alert.error("Failed to load framework for your org.")
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setFrameworkData(responseJson)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log("err in framework: ", error.toString());
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getApps = () => {
|
||||||
|
fetch(globalUrl + "/api/v1/apps", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.log("Status not 200 for apps :O!");
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((responseJson) => {
|
||||||
|
setApps(responseJson);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log("App loading error: "+error.toString());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const usecaseButtons = [{
|
||||||
|
"name": "Phishing",
|
||||||
|
"usecase": "Email management",
|
||||||
|
"color": "#C51152",
|
||||||
|
}, {
|
||||||
|
"name": "Enrichment",
|
||||||
|
"usecase": "2. Enrich",
|
||||||
|
"color": "#F4C20D",
|
||||||
|
}, {
|
||||||
|
"name": "Detection",
|
||||||
|
"usecase": "3. Detect",
|
||||||
|
"color": "#3CBA54",
|
||||||
|
}, {
|
||||||
|
"name": "Response",
|
||||||
|
"usecase": "4. Respond",
|
||||||
|
"color": "#4885ED",
|
||||||
|
}]
|
||||||
|
|
||||||
|
const handleSetSearch = (input, orgupdate) => {
|
||||||
|
if (input !== defaultSearch) {
|
||||||
|
setDefaultSearch(input)
|
||||||
|
setSelectionOpen(false)
|
||||||
|
setTimeout(function(){
|
||||||
|
setSelectionOpen(true)
|
||||||
|
}, 150);
|
||||||
|
|
||||||
|
//if (userdata !== undefined && userdata.active_org !== undefined && userdata.active_org.id !== undefined) {
|
||||||
|
// sendOrgUpdate("", "", userdata.active_org.id, orgupdate)
|
||||||
|
//}
|
||||||
|
} else {
|
||||||
|
setDefaultSearch("")
|
||||||
|
setSelectionOpen(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getFramework()
|
||||||
|
getApps()
|
||||||
|
getAvailableWorkflows()
|
||||||
|
|
||||||
|
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)) {
|
||||||
|
setShowWelcome(true)
|
||||||
|
if (foundTab === 3 || foundTab === "3") {
|
||||||
|
handleSetSearch(usecaseButtons[0].name, usecaseButtons[0].usecase)
|
||||||
|
}
|
||||||
|
|
||||||
|
setActiveStep(foundTab-1)
|
||||||
|
} else {
|
||||||
|
//navigate(`/welcome?tab=1`)
|
||||||
|
navigate(`/welcome?tab=2`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const isStepSkipped = step => {
|
||||||
|
return skipped.has(step)
|
||||||
|
}
|
||||||
|
|
||||||
|
const paperObject = {
|
||||||
|
flex: 1,
|
||||||
|
padding: 0,
|
||||||
|
textAlign: "center",
|
||||||
|
maxWidth: 300,
|
||||||
|
minWidth: 300,
|
||||||
|
backgroundColor: theme.palette.surfaceColor,
|
||||||
|
color: "white",
|
||||||
|
borderRadius: theme.palette.borderRadius,
|
||||||
|
}
|
||||||
|
|
||||||
|
const actionObject = {
|
||||||
|
padding: "35px",
|
||||||
|
maxHeight: 300,
|
||||||
|
minHeight: 300,
|
||||||
|
borderRadius: theme.palette.borderRadius,
|
||||||
|
}
|
||||||
|
|
||||||
|
const imageStyle = {
|
||||||
|
width: 150,
|
||||||
|
// height: 150,
|
||||||
|
// margin: "auto",
|
||||||
|
// marginTop: 10,
|
||||||
|
borderRadius: 75,
|
||||||
|
objectFit: "scale-down",
|
||||||
|
}
|
||||||
|
const buttonStyle = {
|
||||||
|
borderRadius: 8,
|
||||||
|
height: 51,
|
||||||
|
width: 464,
|
||||||
|
fontSize: 16,
|
||||||
|
background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)",
|
||||||
|
padding: "16px 24px",
|
||||||
|
top: 75,
|
||||||
|
margin: "auto",
|
||||||
|
itemAlign: "center",
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultImage = "/images/experienced.png"
|
||||||
|
const experienced_image = userdata !== undefined && userdata !== null && userdata.active_org !== undefined && userdata.active_org.image !== undefined && userdata.active_org.image !== null && userdata.active_org.image !== "" ? userdata.active_org.image : defaultImage
|
||||||
|
return (
|
||||||
|
<div style={{width: 1000, margin: "auto", paddingBottom: 150, minHeight: 1500, marginTop: 50, }}>
|
||||||
|
{/*
|
||||||
|
<div style={{position: "fixed", bottom: 110, right: 110, display: "flex", }}>
|
||||||
|
<img src="/images/Arrow.png" style={{width: 250, height: "100%",}} />
|
||||||
|
</div>
|
||||||
|
*/}
|
||||||
|
{showWelcome === true ?
|
||||||
|
<div>
|
||||||
|
<div style={{minWidth: 500, maxWidth: 500, margin: "auto", marginTop: isCloud ? "auto" : 20, }}>
|
||||||
|
<Stepper
|
||||||
|
activeStep={activeStep}
|
||||||
|
color="primary"
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme.palette.platformColor,
|
||||||
|
borderRadius: theme.palette.borderRadius,
|
||||||
|
padding: 12,
|
||||||
|
border: "1px solid rgba(255,255,255,0.3)",
|
||||||
|
maxWidth: 500,
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{steps.map((label, index) => {
|
||||||
|
const stepProps = {}
|
||||||
|
const labelProps = {}
|
||||||
|
//if (isStepOptional(index)) {
|
||||||
|
// labelProps.optional = "optional"
|
||||||
|
//}
|
||||||
|
|
||||||
|
if (isStepSkipped(index)) {
|
||||||
|
stepProps.completed = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Step key={label} {...stepProps} style={{maxWidth: 160, color: "white", }}>
|
||||||
|
<StepLabel {...labelProps} style={{marginLeft: 10, color: "white",}}>
|
||||||
|
{label}
|
||||||
|
</StepLabel>
|
||||||
|
</Step>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Stepper>
|
||||||
|
</div>
|
||||||
|
<Grid container spacing={2} style={{ padding: 0, maxWidth: 1000, minWidth: 1000, margin: "auto", }}>
|
||||||
|
<Grid item xs={window.location.href.includes("tab=2") ? 6 : 12}>
|
||||||
|
<div>
|
||||||
|
{/*
|
||||||
|
<WelcomeForm
|
||||||
|
userdata={userdata}
|
||||||
|
globalUrl={globalUrl}
|
||||||
|
discoveryWrapper={discoveryWrapper}
|
||||||
|
setDiscoveryWrapper={setDiscoveryWrapper}
|
||||||
|
/>
|
||||||
|
*/}
|
||||||
|
<WelcomeForm2
|
||||||
|
userdata={userdata}
|
||||||
|
globalUrl={globalUrl}
|
||||||
|
discoveryWrapper={discoveryWrapper}
|
||||||
|
setDiscoveryWrapper={setDiscoveryWrapper}
|
||||||
|
appFramework={frameworkData}
|
||||||
|
getFramework={getFramework}
|
||||||
|
steps={steps}
|
||||||
|
skipped={skipped}
|
||||||
|
setSkipped={setSkipped}
|
||||||
|
activeStep={activeStep}
|
||||||
|
setActiveStep={setActiveStep}
|
||||||
|
getApps={getApps}
|
||||||
|
apps={apps}
|
||||||
|
handleSetSearch={handleSetSearch}
|
||||||
|
usecaseButtons={usecaseButtons}
|
||||||
|
defaultSearch={defaultSearch}
|
||||||
|
setDefaultSearch={setDefaultSearch}
|
||||||
|
selectionOpen={selectionOpen}
|
||||||
|
setSelectionOpen={setSelectionOpen}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Grid>
|
||||||
|
{frameworkData === undefined || window.location.href.includes("tab=1") || window.location.href.includes("tab=3") ? null :
|
||||||
|
<div style={{marginTop: 25, }}>
|
||||||
|
<Typography variant="h6" style={{textAlign: "center", marginBottom: 25, }}>
|
||||||
|
App Framework
|
||||||
|
</Typography>
|
||||||
|
<Fade>
|
||||||
|
<AppFramework
|
||||||
|
inputUsecase={inputUsecase}
|
||||||
|
frameworkData={frameworkData}
|
||||||
|
setFrameworkData={setFrameworkData}
|
||||||
|
selectedOption={"Draw"}
|
||||||
|
showOptions={false}
|
||||||
|
isLoaded={true}
|
||||||
|
isLoggedIn={true}
|
||||||
|
globalUrl={globalUrl}
|
||||||
|
size={0.78}
|
||||||
|
color={theme.palette.platformColor}
|
||||||
|
discoveryWrapper={discoveryWrapper}
|
||||||
|
setDiscoveryWrapper={setDiscoveryWrapper}
|
||||||
|
apps={apps}
|
||||||
|
inputUsecases={usecases}
|
||||||
|
setInputUsecases={setUsecases}
|
||||||
|
/>
|
||||||
|
</Fade>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<Fade in={true}>
|
||||||
|
<div style={{maxWidth: 700, margin: "auto", marginTop: 50, }}>
|
||||||
|
{/*
|
||||||
|
<div style={{display:"flex"}}>
|
||||||
|
<ArrowBackIosIcon style={{color: "#9E9E9E",}} onClick={() => {
|
||||||
|
navigate("/login")
|
||||||
|
}}/>
|
||||||
|
<Typography variant="body1" style={{color: "#9E9E9E",textAlign: "center", marginBottom: 50, paddingRight: "366px"}} onClick={() => {
|
||||||
|
navigate("/login")
|
||||||
|
}}>
|
||||||
|
Back
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
*/}
|
||||||
|
<Typography variant="h4" style={{color: "#F1F1F1", textAlign: "center", marginTop: 50, }}>
|
||||||
|
Help us get to know you
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1" style={{color: "#9E9E9E", textAlign: "center", marginBottom: 50,}}>
|
||||||
|
We will use this information to personalize your automation
|
||||||
|
</Typography>
|
||||||
|
<div style={{display: "flex", marginTop: 70, width: 700, margin: "auto",}}>
|
||||||
|
<div style={{border: "1px solid #806BFF", borderRadius: theme.palette.borderRadius, }}>
|
||||||
|
<Card style={paperObject} onClick={() => {
|
||||||
|
if (isCloud) {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "welcome",
|
||||||
|
action: "click_welcome_continue",
|
||||||
|
label: "",
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
//setActiveStep(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
setShowWelcome(true)
|
||||||
|
}}>
|
||||||
|
<CardActionArea style={actionObject}>
|
||||||
|
<img src="/images/welcome-to-shuffle.png" style={imageStyle} />
|
||||||
|
<Typography variant="h4" style={{color: "#F1F1F1"}}>
|
||||||
|
New to Shuffle
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1" style={{marginTop: 10, color: "rgba(255,255,255,0.8)"}}>
|
||||||
|
Let us guide you for an easier experience
|
||||||
|
</Typography>
|
||||||
|
</CardActionArea>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<div style={{marginLeft: 25, marginRight: 25, }}>
|
||||||
|
{/* <Typography style={{marginTop: 200, }}>
|
||||||
|
OR
|
||||||
|
</Typography> */}
|
||||||
|
</div>
|
||||||
|
<Card style={paperObject} onClick={() => {
|
||||||
|
if (isCloud) {
|
||||||
|
ReactGA.event({
|
||||||
|
category: "welcome",
|
||||||
|
action: "click_getting_started",
|
||||||
|
label: "",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
navigate("/workflows?message=Skipped intro")
|
||||||
|
}}>
|
||||||
|
<CardActionArea style={actionObject}>
|
||||||
|
<img src={experienced_image} style={{padding: experienced_image === defaultImage ? 38 : 10, objectFit: "scale-down", minHeight: experienced_image === defaultImage ? 40 : 70, maxHeight: experienced_image === defaultImage ? 40 : 70, bordeRadius: theme.palette.borderRadius, }} />
|
||||||
|
<Typography variant="h4" style={{color: "#F1F1F1"}}>
|
||||||
|
Experienced
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1" style={{marginTop: 10, color: "rgba(255,255,255,0.8)"}}>
|
||||||
|
Head to Shuffle right away
|
||||||
|
</Typography>
|
||||||
|
</CardActionArea>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/*
|
||||||
|
<div style={{display: "flex", flexDirection: "row", }}>
|
||||||
|
<Button variant="contained" type="submit" fullWidth style={buttonStyle} onClick={() => {
|
||||||
|
navigate("/workflows?message=Skipped intro continue")
|
||||||
|
}}>
|
||||||
|
Continue
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
*/}
|
||||||
|
|
||||||
|
<div style={{margin: "auto", borderRadius: theme.palette.borderRadius, marginTop: 50, width: 200, overflow: "wrap", padding: 25, cursor: "pointer", }} onClick={() => {
|
||||||
|
if (window.drift !== undefined) {
|
||||||
|
window.drift.api.startInteraction({ interactionId: 340045 })
|
||||||
|
} else {
|
||||||
|
console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<Typography variant="body1" style={{margin: "auto", textAlign: "center"}}>
|
||||||
|
Want a demo instead?
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Fade>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Welcome;
|
||||||
Reference in New Issue
Block a user