diff --git a/docker-compose.yml b/docker-compose.yml index 1b93335c..c35a6138 100755 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -57,7 +57,7 @@ services: security_opt: - seccomp:unconfined opensearch: - image: opensearchproject/opensearch:2.5.0 + image: opensearchproject/opensearch:2.11.0 hostname: shuffle-opensearch container_name: shuffle-opensearch environment: @@ -84,9 +84,17 @@ services: networks: - shuffle restart: unless-stopped + + #memcached: + # image: docker.io/bitnami/memcached:1 + # container_name: shuffle-cache + # hostname: shuffle-cache + # ports: + # - 11211:11211 + #docker-socket-proxy: # image: tecnativa/docker-socket-proxy - # container_name: shuffle-frontend + # container_name: docker-socket-proxy # hostname: docker-socket-proxy # privileged: true # environment: @@ -111,6 +119,7 @@ services: # - /var/run/docker.sock:/var/run/docker.sock # networks: # - shuffle + # networks: shuffle: driver: bridge diff --git a/frontend/src/components/AppSearchButtons.jsx b/frontend/src/components/AppSearchButtons.jsx new file mode 100644 index 00000000..d739b96c --- /dev/null +++ b/frontend/src/components/AppSearchButtons.jsx @@ -0,0 +1,403 @@ +import React, { useState, useEffect, useRef } from "react"; +import theme from '../theme.jsx'; +import ReactGA from 'react-ga4'; +import { useNavigate, Link } from 'react-router-dom'; + +import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon, Close as CloseIcon, Folder as FolderIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material'; +import aa from 'search-insights' +import DeleteIcon from '@mui/icons-material/Delete'; +import ShowChartIcon from '@mui/icons-material/ShowChart'; +import ExploreIcon from '@mui/icons-material/Explore'; +import LightbulbIcon from "@mui/icons-material/Lightbulb"; +import NewReleasesIcon from "@mui/icons-material/NewReleases"; +import ExtensionIcon from "@mui/icons-material/Extension"; +import EmailIcon from "@mui/icons-material/Email"; +import FingerprintIcon from '@mui/icons-material/Fingerprint'; +import AppSearch from "../components/Appsearch.jsx"; +import { toast } from 'react-toastify'; +import { + Zoom, + Grid, + Paper, + TextField, + Collapse, + IconButton, + Avatar, + ButtonBase, + InputAdornment, + Typography, + Button, + Tooltip, + List, + ListItem, + ListItemAvatar, + ListItemText, +} from '@mui/material'; + +const AppSearchButtons = (props) => { + const { userdata, globalUrl, appFramework, defaultSearch, finishedApps, onNodeSelect, setDiscoveryData, appName, AppImage, setDefaultSearch, discoveryData } = props + const ref = useRef() + const [moreButton, setMoreButton] = useState(false); + let navigate = useNavigate(); + + const sizing = moreButton ? 510 : 480; + const buttonWidth = 450; + const buttonMargin = 10; + const bottomButtonStyle = { + borderRadius: 200, + marginTop: moreButton ? 44 : "", + height: 51, + width: 510, + fontSize: 16, + // background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)", + background: "linear-gradient(90deg, #F86744 0%, #F34475 100%)", + padding: "16px 24px", + // top: 20, + // margin: "auto", + textTransform: 'capitalize', + itemAlign: "center", + // marginTop: 25 + // marginLeft: "65px", + }; + const buttonStyle = { + flex: 1, + width: 224, + padding: 25, + margin: buttonMargin, + color: "var(--White-text, #F1F1F1)", + fontWeight: 400, + fontSize: 17, + background: "rgba(33, 33, 33, 1)", + textTransform: 'capitalize', + border: "1px solid rgba(33, 33, 33, 1)", + borderRadius: 8, + marginRight: 8, + }; + + const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io"; + + const mouseOver = (e) => { + e.target.style.border = "1px solid #f85a3e"; + } + const mouseOut = (e) => { + e.target.style.border = "1px solid rgb(33, 33, 33)"; + } + + return ( + + + {/*Find your integrations!*/} + {/*
+ +
+
+ + +
+
+ + +
+ {moreButton ? ( +
+ + + +
+ ) + : +
+ +
} */} +
+
} + onClick={(event) => { + onNodeSelect("CASES"); + setDefaultSearch(discoveryData.label) + }} + > +
+ {AppImage === undefined || AppImage === undefined || + AppImage === null || AppImage === null || AppImage.length === 0 ? +
+ +
+ : } +
+ Case Management + {appName === undefined || appName === undefined || + appName === null || appName === null || appName.length === 0 ? + "" + : + {appName}} +
+ +
+
+
+ + ) +} +export default AppSearchButtons diff --git a/frontend/src/components/AppSelection.jsx b/frontend/src/components/AppSelection.jsx index 5ead4f9a..d5f212df 100644 --- a/frontend/src/components/AppSelection.jsx +++ b/frontend/src/components/AppSelection.jsx @@ -14,6 +14,7 @@ import ExtensionIcon from "@mui/icons-material/Extension"; import EmailIcon from "@mui/icons-material/Email"; import FingerprintIcon from '@mui/icons-material/Fingerprint'; import AppSearch from "../components/Appsearch.jsx"; +import AppSearchButtons from "../components/AppSearchButtons.jsx"; import { toast } from 'react-toastify'; import { Zoom, @@ -42,26 +43,23 @@ const AppSelection = props => { setActiveStep, defaultSearch, setDefaultSearch, - checkLogin, + checkLogin, } = props; const [discoveryData, setDiscoveryData] = React.useState({}) const [selectionOpen, setSelectionOpen] = React.useState(false) const [newSelectedApp, setNewSelectedApp] = React.useState({}) const [finishedApps, setFinishedApps] = React.useState([]) + const [appButtons, setAppButtons] = useState([]) + const [apps, setApps] = useState([]) const [appName, setAppName] = React.useState(); const [moreButton, setMoreButton] = useState(false); - + // const [mouseHoverIndex, setMouseHoverIndex] = useState(-1) const ref = useRef() let navigate = useNavigate(); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io"; - const mouseOver = (e) => { - e.target.style.border = "1px solid #f85a3e"; - } - const mouseOut = (e) => { - e.target.style.border = "1px solid rgb(33, 33, 33)"; - } + const setFrameworkItem = (data) => { console.log("Setting framework item: ", data, isCloud) // if (!isCloud) { @@ -82,9 +80,9 @@ const AppSelection = props => { console.log("Status not 200 for framework!"); } - if (checkLogin !== undefined) { - checkLogin() - } + if (checkLogin !== undefined) { + checkLogin() + } return response.json(); }) @@ -101,14 +99,55 @@ const AppSelection = props => { //setFrameworkData(responseJson) }) .catch((error) => { - if (checkLogin !== undefined) { - checkLogin() - } + if (checkLogin !== undefined) { + checkLogin() + } toast(error.toString()); //setFrameworkLoaded(true) }) } + const GetApps = (data) => { + console.log("Setting framework item: ", data, isCloud) + // if (!isCloud) { + // activateApp(data.id) + // } + + fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", { + method: "GET", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify(data), + credentials: "include", + }) + .then((responseJson) => { + if (responseJson === null) { + console.log("null-response from server") + const pretend_apps = [{ + "description": "TBD", + "id": "TBD", + "large_image": "", + "name": "TBD", + "type": "TBD" + }] + + setApps(pretend_apps) + return + } + + if (responseJson.success === false) { + console.log("error loading apps: ", responseJson) + return + } + + setApps(responseJson); + }) + .catch((error) => { + console.log("App loading error: " + error.toString()); + }) + } const onNodeSelect = (label) => { // if (setDiscoveryWrapper !== undefined) { @@ -128,6 +167,36 @@ const AppSelection = props => { setDefaultSearch(label.charAt(0).toUpperCase() + (label.substring(1)).toLowerCase()) }; + useEffect(() => { + var tempApps = [] + if (tempApps.length === 0) { + const tempApps = + [{ + "description": newSelectedApp.description, + "id": newSelectedApp.objectID, + "large_image": newSelectedApp.image_url, + "name": newSelectedApp.name, + "type": discoveryData + }, + //{ + // // description: newSelectedApp.siem.description, + // id: newSelectedApp.siem.objectID, + // large_image: newSelectedApp.siem.image_url, + // name: newSelectedApp.siem.name, + // type: discoveryData.siem + // },{ + // // description: newSelectedApp.edr.description, + // id: newSelectedApp.edr.objectID, + // large_image: newSelectedApp.edr.image_url, + // name: newSelectedApp.edr.name, + // type: discoveryData.edr + // } + ] + setAppButtons(tempApps) + GetApps() + } + }, []) + useEffect(() => { if (newSelectedApp.objectID === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID.length === 0) { return @@ -169,7 +238,7 @@ const AppSelection = props => { }, [newSelectedApp]); const sizing = moreButton ? 510 : 480; - const buttonWidth = 450; + const buttonWidth = 450; const buttonMargin = 10; const bottomButtonStyle = { borderRadius: 200, @@ -186,7 +255,7 @@ const AppSelection = props => { itemAlign: "center", // marginTop: 25 // marginLeft: "65px", - }; + }; const buttonStyle = { flex: 1, width: 224, @@ -229,8 +298,8 @@ const AppSelection = props => { }} >
-
- {discoveryData} +
+ {discoveryData}
{ > Select the apps you work with and we will connect the for you. - - - {/*Find your integrations!*/} -
- -
-
- - -
-
- - -
- {moreButton ? ( -
- - - -
+ {appButtons.map((appData, index) => { + + const appName = appData.name + const AppImage = appData.large_image + const appType = appData.type + + return ( + + ) - : -
- -
} - + })}