marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed some of the first basic rendering issues

Browse Source
This commit is contained in:
Frikky
2023-08-15 21:08:35 +02:00
parent 7282185805
commit 2c140d23bd
20 changed files with 178 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppFramework.jsx
+7 -9
View File
@@ -18,21 +18,19 @@ import {
Divider,
IconButton,
Badge,
CircularProgress,
CircularProgress,
Tooltip,
Dialog,
Chip,
Avatar,
} from "@material-ui/core";
Button,
} from "@mui/material";
import {
Button
} from '@material-ui/core';
import {
Close as CloseIcon,
Delete as DeleteIcon,
} from "@material-ui/icons";
} from "@mui/icons-material";
import * as edgehandles from "cytoscape-edgehandles";
import * as cytoscape from "cytoscape";
@@ -1996,7 +1994,7 @@ const AppFramework = (props) => {
{
Object.getOwnPropertyNames(discoveryData).length > 0 ?
<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, }}>
<Paper style={{width: 300, maxHeight: 400, overflow: "hidden", zIndex: 12500, padding: 25, paddingRight: 25, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.2)", position: "absolute", top: -50, left: 50, }}>
{paperTitle.length > 0 ?
<span>
<Typography variant="h6" style={{textAlign: "center"}}>
@@ -2130,7 +2128,7 @@ const AppFramework = (props) => {
?
<span>
<Typography variant="body2" color="textSecondary" style={{marginTop: 10}}>
Click an app below to select it
Search to find your app
</Typography>
</span>
:
@@ -2165,7 +2163,7 @@ const AppFramework = (props) => {
elements={elements}
minZoom={0.35}
maxZoom={2.00}
style={{width: 560*scale, height: 560*scale, backgroundColor: "transparent", margin: "auto",}}
style={{width: 560*scale, height: 560*scale, backgroundColor: theme.palette.backgroundColor, margin: "auto",}}
stylesheet={frameworkStyle}
boxSelectionEnabled={false}
panningEnabled={false}
frontend/src/components/Appsearch.jsx
+15 -4
View File
@@ -1,14 +1,25 @@
import React, { useState, useEffect } from 'react';
import ReactGA from 'react-ga4';
import { useTheme } from '@material-ui/core/styles';
import theme from '../theme';
//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 { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material';
//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 {
Grid,
Paper,
TextField,
ButtonBase,
InputAdornment,
Typography,
Button,
Tooltip
} from '@mui/material';
import aa from 'search-insights'
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
const Appsearch = props => {
@@ -18,7 +29,7 @@ const Appsearch = props => {
const alert = useAlert();
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
const xs = parsedXs === undefined || parsedXs === null ? 12 : parsedXs
const theme = useTheme();
//const theme = useTheme();
//const [apps, setApps] = React.useState([]);
//const [filteredApps, setFilteredApps] = React.useState([]);
const [formMail, setFormMail] = React.useState("");
frontend/src/components/EditWorkflow.jsx
+4 -4
View File
@@ -1,7 +1,7 @@
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 { MuiChipsInput } from "mui-chips-input";
import UsecaseSearch from "../components/UsecaseSearch.jsx"
import dayjs from 'dayjs';
@@ -38,7 +38,7 @@ import {
FormControl,
FormLabel,
} from "@material-ui/core";
} from "@mui/material";
import {
DatePicker,
@@ -52,7 +52,7 @@ import {
ExpandMore as ExpandMoreIcon,
Publish as PublishIcon,
OpenInNew as OpenInNewIcon,
} from "@material-ui/icons";
} from "@mui/icons-material";
const EditWorkflow = (props) => {
const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, } = props
@@ -260,7 +260,7 @@ const EditWorkflow = (props) => {
/>
</div>
<div style={{display: "flex", marginTop: 10, }}>
<ChipInput
<MuiChipsInput
style={{ flex: 1, maxHeight: 40, marginTop: 12, overflow: "auto", }}
InputProps={{
style: {
frontend/src/components/Files.jsx
+2 -2
View File
@@ -15,7 +15,7 @@ import {
Divider,
Select,
MenuItem,
} from "@material-ui/core";
} from "@mui/material";
import {
OpenInNew as OpenInNewIcon,
@@ -27,7 +27,7 @@ import {
Publish as PublishIcon,
Clear as ClearIcon,
Add as AddIcon,
} from "@material-ui/icons";
} from "@mui/icons-material";
import { useAlert } from "react-alert";
import Dropzone from "../components/Dropzone.jsx";
frontend/src/components/Header.jsx
+17 -14
View File
@@ -1,6 +1,7 @@
import React, {useState} from 'react';
import theme from '../theme.jsx';
import {BrowserView, MobileView} from "react-device-detect";
import { useTheme } from '@material-ui/core/styles';
//import { useTheme } from '@material-ui/core/styles';
import { useNavigate, Link } from "react-router-dom";
import ReactGA from 'react-ga4';
@@ -21,7 +22,7 @@ import {
IconButton,
Divider,
LinearProgress,
} from '@material-ui/core'
} from '@mui/material'
import {
MeetingRoom as MeetingRoomIcon,
@@ -29,12 +30,13 @@ import {
Settings as SettingsIcon,
Notifications as NotificationsIcon,
Home as HomeIcon,
Polymer as PolymerIcon,
Apps as AppsIcon,
Description as DescriptionIcon,
EmojiObjects as EmojiObjectsIcon,
Business as BusinessIcon,
} from '@material-ui/icons';
Polyline as PolylineIcon,
} from '@mui/icons-material';
import {
Analytics as AnalyticsIcon,
@@ -49,7 +51,7 @@ const hoverOutColor = "#e8eaf6"
const Header = props => {
const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, homePage, userdata, serverside, } = props;
const theme = useTheme();
//const theme = useTheme();
const alert = useAlert()
@@ -519,6 +521,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
}
// Handle top bar or something
const defaultTop = 7
const loginTextBrowser = !isLoggedIn ?
<div style={{display: "flex", minWidth: 1250, maxWidth: 1250, margin: "auto", textAlign: "center",}}>
<div style={{display: "flex", flex: 1, }}>
@@ -669,7 +672,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
</div>
</div>
:
<div style={{display: "flex", backgroundColor: "#1f2023",}}>
<div style={{display: "flex", }}>
<div style={{minWidth: 1250, maxWidth: 1250, display: "flex", margin: "auto", }}>
<div style={{flex: 1, flexDirection: "row"}}>
<List style={{height: 56, marginTop: "auto", marginBottom: "auto", display: "flex", flexDirect: "row", alignItems: "baseline", maxWidth: 340, }} component="nav">
@@ -691,9 +694,9 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
<Link to="/workflows" style={hrefStyle}>
<div onMouseOver={handleSoarHover} onMouseOut={handleSoarHoverOut} style={{color: SoarHoverColor, cursor: "pointer", display: "flex"}}>
{/*
<PolymerIcon style={{marginRight: "5px"}} />
<PolylineIcon style={{marginRight: "5px"}} />
*/}
<span style={{marginTop: 0, marginRight: 8, }}>Workflows</span>
<Typography style={{marginTop: defaultTop, marginRight: 8, }}>Workflows</Typography>
</div>
</Link>
</ListItem>
@@ -703,7 +706,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
{/*
<AppsIcon style={{marginRight: "5px"}} />
*/}
<span style={{marginTop: 0, marginRight: 5, }}>Apps</span>
<Typography style={{marginTop: defaultTop, marginRight: 5, }}>Apps</Typography>
</div>
</Link>
</ListItem>
@@ -720,7 +723,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
{/*
<DescriptionIcon style={{marginRight: "5px"}} />
*/}
<span style={{marginTop: 0,}}>Docs</span>
<Typography style={{marginTop: defaultTop,}}>Docs</Typography>
</div>
</Link>
</ListItem>
@@ -1029,16 +1032,16 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
const loadedCheck =
<div style={{minHeight: 68}}>
<BrowserView>
{loginTextBrowser}
{loginTextBrowser}
</BrowserView>
<MobileView>
{loginTextMobile}
{loginTextMobile}
</MobileView>
</div>
// <div style={{backgroundImage: "linear-gradient(-90deg,#342f78 0,#29255e 50%,#1b1947 100%"}}>
return (
<div style={{backgroundColor: props.color === "undefined" ? "inherit" : props.color}}>
{loadedCheck}
<div style={{backgroundColor: theme.palette.backgroundColor, }}>
{loadedCheck}
</div>
)
}
frontend/src/components/Oauth2Auth.jsx
+3 -2
View File
@@ -1,6 +1,6 @@
import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
import { useParams, useNavigate, Link } from "react-router-dom";
import { useTheme } from "@material-ui/core/styles";
//import { useTheme } from "@material-ui/core/styles";
import theme from '../theme.jsx';
import { useAlert } from "react-alert";
@@ -38,7 +38,8 @@ import {
CircularProgress,
Switch,
Fade,
} from "@material-ui/core";
} from "@mui/material";
import {
LockOpen as LockOpenIcon,
SupervisorAccount as SupervisorAccountIcon,
frontend/src/components/OrgHeader.jsx
+17 -12
View File
@@ -1,17 +1,23 @@
import React, { useEffect } from "react";
import { makeStyles } from "@material-ui/styles";
import { useTheme } from "@material-ui/core/styles";
import theme from "../theme";
import { makeStyles } from "@mui/styles";
import {
Tooltip,
Grid,
Button,
TextField,
Typography,
IconButton,
} from "@mui/material";
import {
ExpandLess as ExpandLessIcon,
ExpandMore as ExpandMoreIcon,
Save as SaveIcon,
} from "@mui/icons-material";
import Tooltip from "@material-ui/core/Tooltip";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import { useAlert } from "react-alert";
import IconButton from "@material-ui/core/IconButton";
import ExpandLessIcon from "@material-ui/icons/ExpandLess";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import SaveIcon from "@material-ui/icons/Save";
const useStyles = makeStyles({
notchedOutline: {
@@ -33,7 +39,6 @@ const OrgHeader = (props) => {
handleEditOrg,
} = props;
const theme = useTheme();
const alert = useAlert();
const classes = useStyles();
frontend/src/components/Priorities.jsx
+1 -1
View File
@@ -9,7 +9,7 @@ import {
Grid,
Card,
Switch,
} from "@material-ui/core";
} from "@mui/material";
import Priority from "../components/Priority.jsx";
import { useAlert } from "react-alert";
frontend/src/components/Priority.jsx
+4 -4
View File
@@ -10,7 +10,7 @@ import {
Button,
Grid,
Card,
} from "@material-ui/core";
} from "@mui/material";
// import magic wand icon from material ui icons
import {
@@ -69,7 +69,7 @@ const Priority = (props) => {
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={{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: 95, 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}
@@ -102,7 +102,7 @@ const Priority = (props) => {
}
</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={() => {
<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 : "rgba(255,255,255,0.8)", }} variant="contained" color="secondary" onClick={() => {
if (isCloud) {
ReactGA.event({
@@ -125,7 +125,7 @@ const Priority = (props) => {
}
}
}}>
explore
Explore
</Button>
{priority.active === true ?
<Button style={{borderRadius: 25, width: 100, height: 50, marginTop: 8, }} variant="text" color="secondary" onClick={() => {
frontend/src/components/WelcomeForm2.jsx
+5 -5
View File
@@ -615,7 +615,7 @@ const WelcomeForm = (props) => {
<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={{
<Button disabled={finishedApps.includes("CASES")} variant={defaultSearch === "CASES" ? "contained" : "outlined"} color="secondary" style={{
flex: 1,
width: "100%",
padding: 25,
@@ -627,20 +627,20 @@ const WelcomeForm = (props) => {
</Button>
</div>
<div style={{display: "flex"}}>
<Button disabled={finishedApps.includes("SIEM")} variant={defaultSearch === "SIEM" ? "contained" : "outlined"} style={buttonStyle} startIcon={<SearchIcon />} onClick={(event) => { onNodeSelect("SIEM") }} >
<Button disabled={finishedApps.includes("SIEM")} variant={defaultSearch === "SIEM" ? "contained" : "outlined"} style={buttonStyle} startIcon={<SearchIcon />} color="secondary" 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") }} >
<Button disabled={finishedApps.includes("EDR & AV") || finishedApps.includes("ERADICATION")} variant={defaultSearch === "Eradication" ? "contained" : "outlined"} style={buttonStyle} startIcon={<NewReleasesIcon />} color="secondary" 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") }} >
<Button disabled={finishedApps.includes("INTEL")} variant={defaultSearch === "INTEL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<ExtensionIcon />} color="secondary" 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") }} >
<Button disabled={finishedApps.includes("COMMS") || finishedApps.includes("EMAIL")} variant={defaultSearch === "EMAIL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<EmailIcon />} color="secondary" onClick={(event) => { onNodeSelect("EMAIL") }} >
Email
</Button>
</div>