{
width={100}
height={90}
style={{
- borderRadius: 6,
+ borderRadius: 4,
backgroundColor: "rgba(255, 255, 255, 0.1)"
}}
/>
@@ -1024,43 +1048,43 @@ const Apps2 = (props) => {
}, []);
// Fetch apps based on the current tab : 0 -> org_apps, 1 -> my_apps, 2 -> all_apps
- useEffect(() => {
- const fetchApps = async () => {
- const baseUrl = globalUrl;
- let url;
- setIsLoading(true);
- const userId = userdata?.id;
- if (currTab === 1 && userId) {
- url = `${baseUrl}/api/v1/users/${userId}/apps`;
+ const fetchApps = async () => {
+ const baseUrl = globalUrl;
+ let url;
+ setIsLoading(true);
+ const userId = userdata?.id;
+ if (currTab === 1 && userId) {
+ url = `${baseUrl}/api/v1/users/${userId}/apps`;
+ } else if (currTab === 0) {
+ url = `${baseUrl}/api/v1/apps`;
+ }
+ try {
+ const response = await fetch(url, {
+ method: "GET",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const data = await response.json();
+ if (currTab === 1) {
+ setAppsToShow(data);
+ setUserApps(data);
} else if (currTab === 0) {
- url = `${baseUrl}/api/v1/apps`;
+ setAppsToShow(data);
+ setOrgApps(data);
+ // For testing the empty state
+ // setAppsToShow([]);
+ // setOrgApps([]);
}
- try {
- const response = await fetch(url, {
- method: "GET",
- credentials: "include",
- headers: {
- "Content-Type": "application/json",
- },
- });
- const data = await response.json();
- if (currTab === 1) {
- setAppsToShow(data);
- setUserApps(data);
- } else if (currTab === 0) {
- setAppsToShow(data);
- setOrgApps(data);
- // For testing the empty state
- // setAppsToShow([]);
- // setOrgApps([]);
- }
- setIsLoading(false);
- } catch (err) {
- console.error("Error fetching apps:", err);
- setIsLoading(false);
- }
- };
+ setIsLoading(false);
+ } catch (err) {
+ console.error("Error fetching apps:", err);
+ setIsLoading(false);
+ }
+ };
+ useEffect(() => {
// Only fetch if we have required data
if (globalUrl && (currTab === 0 || (currTab === 1 && userdata?.id))) {
@@ -1164,15 +1188,16 @@ const Apps2 = (props) => {
return response.json();
})
.then((responseJson) => {
- //responseJson = sortByKey(responseJson, "large_image")
- //responseJson = sortByKey(responseJson, "is_valid")
- //setFilteredApps(responseJson.filter(app => !internalIds.includes(app.name) && !(!app.activated && app.generated)))
- console.log("responseJson: from getApps ", responseJson)
var privateapps = [];
var valid = [];
var invalid = [];
for (var key in responseJson) {
const app = responseJson[key];
+
+ if (app.categories !== undefined && app.categories !== null && app?.categories.includes("Eradication")) {
+ app.categories = ["EDR"]
+ }
+
if (app.is_valid && !(!app.activated && app.generated)) {
privateapps.push(app);
} else if (
@@ -1185,21 +1210,13 @@ const Apps2 = (props) => {
}
}
- //console.log(privateapps)
- //console.log(valid)
- //console.log(invalid)
- //console.log(privateapps)
- //privateapps.reverse()
privateapps.push(...valid);
privateapps.push(...invalid);
console.log("privateapps: setting apps ", privateapps)
setAppsToShow(privateapps);
setOrgApps(privateapps);
setApps(privateapps);
- // setCursearch("");
- //handleSearchChange(event.target.value)
- //setCursearch(event.target.value)
// setFilteredApps(privateapps);
if (privateapps.length > 0) {
if (selectedApp.id === undefined || selectedApp.id === null) {
@@ -1708,7 +1725,7 @@ const Apps2 = (props) => {
}
return (
-
+
{
height: 45,
minWidth: 45,
backgroundColor: "#2F2F2F",
- borderRadius: 8,
+ borderRadius: 4,
padding: "8px 16px",
}}
disabled={isLoading}
@@ -1795,7 +1812,7 @@ const Apps2 = (props) => {
height: 45,
minWidth: 45,
backgroundColor: "#2F2F2F",
- borderRadius: 8,
+ borderRadius: 4,
padding: "8px 16px",
}}
disabled={isLoading}
@@ -1821,11 +1838,11 @@ const Apps2 = (props) => {
value={currTab}
onChange={(event, newTab) => handleTabChange(event, newTab)}
TabIndicatorProps={{ style: { height: '3px', borderRadius: 10, backgroundColor: "#FF8544" } }}
- style={{ fontFamily: theme?.typography?.fontFamily }}
+ style={{ fontFamily: theme?.typography?.fontFamily, fontSize: 16 }}
>
-
-
-
+
+
+
@@ -1850,12 +1867,12 @@ const Apps2 = (props) => {
limit={5}
InputProps={{
style: {
- borderRadius: 8,
+ borderRadius: 4,
height: 45
},
endAdornment: (
- {searchQuery.length === 0 ? : (
+ {searchQuery.length === 0 ? : (
{
@@ -1892,7 +1909,7 @@ const Apps2 = (props) => {
displayEmpty
multiple
style={{
- borderRadius: 8,
+ borderRadius: 4,
height: 45,
fontFamily: theme?.typography?.fontFamily
}}
@@ -1956,7 +1973,7 @@ const Apps2 = (props) => {
displayEmpty
multiple
style={{
- borderRadius: 8,
+ borderRadius: 4,
height: 45,
fontFamily: theme?.typography?.fontFamily
}}
@@ -2014,7 +2031,7 @@ const Apps2 = (props) => {
style={{
height: "100%",
width: '100%',
- borderRadius: '7px',
+ borderRadius: '4px',
textTransform: 'none',
backgroundColor: "#FF8544",
color: "#1A1A1A",
@@ -2022,7 +2039,7 @@ const Apps2 = (props) => {
fontSize: 16,
fontWeight: 500
}}
- startIcon={}
+ startIcon={}
>
Create an App
@@ -2062,6 +2079,7 @@ const Apps2 = (props) => {
handleAppClick={handleAppClick}
leftSideBarOpenByClick={leftSideBarOpenByClick}
userdata={userdata}
+ fetchApps={fetchApps}
/>
))}
@@ -2106,6 +2124,7 @@ const Apps2 = (props) => {
{appsToShow.map((data, index) => (
))}
diff --git a/frontend/src/views/Workflows2.jsx b/frontend/src/views/Workflows2.jsx
index aa5bd735..80ef805a 100644
--- a/frontend/src/views/Workflows2.jsx
+++ b/frontend/src/views/Workflows2.jsx
@@ -1,5 +1,5 @@
// React & Core imports
-import React, { useEffect, useContext, memo, useState } from "react";
+import React, { useEffect, useContext, memo, useState, useRef } from "react";
import { useLocation, useNavigate, Link } from "react-router-dom";
import ReactDOM from "react-dom"
@@ -104,7 +104,10 @@ import { MuiChipsInput } from "mui-chips-input";
import { v4 as uuidv4 } from "uuid";
import theme from "../theme.jsx";
import algoliasearch from 'algoliasearch/lite';
-import { InstantSearch, Configure, connectHits } from 'react-instantsearch-dom';
+import { InstantSearch, Configure, connectHits, connectSearchBox, connectRefinementList } from 'react-instantsearch-dom';
+import { debounce } from "lodash";
+import { removeQuery } from "../components/ScrollToTop.jsx";
+
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240");
@@ -668,6 +671,8 @@ const Workflows2 = (props) => {
const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
const [selectedUsecases, setSelectedUsecases] = React.useState([]);
const [filteredWorkflows, setFilteredWorkflows] = React.useState([]);
+ const [orgWorkflows, setOrgWorkflows] = React.useState([]);
+ const [myWorkflows, setMyWorkflows] = React.useState([]);
const [selectedWorkflow, setSelectedWorkflow] = React.useState({});
const [workflowDone, setWorkflowDone] = React.useState(false);
const [selectedWorkflowId, setSelectedWorkflowId] = React.useState("");
@@ -716,18 +721,47 @@ const Workflows2 = (props) => {
const [apps, setApps] = React.useState([]);
document.title = "Shuffle - Workflows";
+
+ useEffect(() => {
+ const queryParams = new URLSearchParams(location.search);
+ const tabParam = queryParams.get('tab');
+ if (tabParam !== null && tabParam !== undefined) {
+ if (tabParam === 'org_workflows' && currTab !== 0) {
+ setCurrTab(0);
+ } else if (tabParam === 'my_workflows' && currTab !== 1) {
+ setCurrTab(1);
+ } else if (tabParam === 'all_workflows' && currTab !== 2) {
+ setCurrTab(2);
+ }
+ }
+ }, [location.search]);
+
const handleTabChange = (event, newValue) => {
- // Set loading when switching to public workflows tab
- if (newValue === 2) {
+ setCurrTab(newValue);
+ // Update URL query params based on tab index
+ const tabMapping = {
+ 0: 'org_workflows',
+ 1: 'my_workflows',
+ 2: 'all_workflows'
+ };
+ const queryParams = new URLSearchParams(location.search);
+ queryParams.set('tab', tabMapping[newValue]);
+
+
+ navigate(`${location.pathname}?${queryParams.toString()}`);
+ };
+
+ useEffect(() => {
+ if (currTab === 2) {
setIsLoadingPublicWorkflow(true);
// Simulate loading time for the Algolia search results
setTimeout(() => {
setIsLoadingPublicWorkflow(false);
- }, 2000);
+ }, 2500);
}
+ }, [currTab])
+
- setCurrTab(newValue);
- };
const handleCreateWorkflow = () => {
setModalOpen(true)
@@ -1203,6 +1237,7 @@ const Workflows2 = (props) => {
}, [isDropzone]);
+
const getFramework = () => {
fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
method: "GET",
@@ -1240,6 +1275,7 @@ const Workflows2 = (props) => {
const getAvailableWorkflows = (amount) => {
var storageWorkflows = []
+ setIsLoadingWorkflow(true)
try {
const storagewf = localStorage.getItem("workflows")
storageWorkflows = JSON.parse(storagewf)
@@ -1527,13 +1563,13 @@ const Workflows2 = (props) => {
overflow: "hidden",
width: "100%",
color: "white",
- padding: "12px 12px 0px 15px",
display: "flex",
fontFamily: theme?.typography?.fontFamily,
boxSizing: "border-box",
position: "relative",
borderRadius: "8px",
// backgroundColor: "#212121",
+ padding: "15px 15px 0px 20px",
};
const gridContainer = {
@@ -2169,7 +2205,6 @@ const Workflows2 = (props) => {
);
};
- // Replace the loading sections in the main component with this
const LoadingWorkflowGrid = () => {
return (
{
if (
parsedName !== undefined &&
parsedName !== null &&
- parsedName.length > 20
+ parsedName.length > 35
) {
- parsedName = parsedName.slice(0, 21) + "..";
+ parsedName = parsedName.slice(0, 34) + "..";
}
const actions = data.actions !== null ? data.actions.length : 0;
@@ -2442,7 +2477,7 @@ const Workflows2 = (props) => {
}
return (
-
+
{selectedCategory !== "" ?
@@ -3906,59 +3941,25 @@ const Workflows2 = (props) => {
// }
useEffect(() => {
- if (userdata !== undefined && userdata !== null && currTab !== 2) {
- setIsLoadingWorkflow(true);
- var filteredWorkflows = []
+ if (currTab === 2) return;
+ if (userdata !== undefined && userdata !== null && filteredWorkflows.length > 0) {
+ var categoryWorkflows = []
if (currTab === 0) {
- filteredWorkflows = workflows.filter(workflow => workflow?.org_id === userdata?.active_org?.id)
+ categoryWorkflows = filteredWorkflows.filter(workflow => workflow?.org_id === userdata?.active_org?.id)
+ setOrgWorkflows(categoryWorkflows)
}
else if (currTab === 1) {
- filteredWorkflows = workflows.filter(workflow => workflow?.org_id === userdata?.active_org?.id && workflow?.owner === userdata?.id)
+ categoryWorkflows = filteredWorkflows.filter(workflow => workflow?.org_id === userdata?.active_org?.id && workflow?.owner === userdata?.id)
+ setMyWorkflows(categoryWorkflows)
}
- setFilteredWorkflows(filteredWorkflows)
- setTimeout(() => {
- setIsLoadingWorkflow(false);
- }, 500);
+ setIsLoadingWorkflow(false);
}
- }, [currTab, workflows, userdata])
+ }, [currTab, workflows, userdata, filteredWorkflows])
- useEffect(() => {
- console.log("SearchQuery: ", searchQuery)
- }, [searchQuery])
- const Hits = ({ hits }) => {
- var counted = 0
- console.log("Public workflows", hits)
- return (
- isLoadingPublicWorkflow ?
- (
-
- ) : (
-
-
- {hits.map((data, index) => {
- return
- })}
-
- )
-
- )
- }
-
- const CustomHits = connectHits(Hits)
const handleCategoryChange = (e) => {
@@ -3972,7 +3973,7 @@ const Workflows2 = (props) => {
borderRadius: '4px',
padding: "12px 16px",
cursor: 'pointer',
- minWidth: '40px',
+ minWidth: '40px',
height: 'auto',
display: 'flex',
alignItems: 'center',
@@ -3980,6 +3981,210 @@ const Workflows2 = (props) => {
}
+ const Hits = ({ hits, isSearchStalled, searchQuery }) => {
+
+ return (
+ isLoadingPublicWorkflow ? (
+
+ ) : (
+
+ {hits.map((data, index) => {
+ return
+ })}
+
+ )
+ )
+ };
+
+ const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
+
+ const inputRef = useRef(null);
+ const [localQuery, setLocalQuery] = useState(searchQuery);
+ const location = useLocation();
+
+
+ useEffect(() => {
+ if (searchQuery) {
+ setLocalQuery(searchQuery);
+ refine(searchQuery);
+ }
+ }, [searchQuery, refine]);
+
+ // Debounced function to refine search
+ const debouncedRefine = useRef(
+ debounce((value) => {
+ setSearchQuery(value);
+ removeQuery("q");
+ refine(value);
+ }, 300)
+ ).current;
+
+ useEffect(() => {
+ const urlSearchParams = new URLSearchParams(window.location.search);
+ const params = Object.fromEntries(urlSearchParams.entries());
+ const foundQuery = params["q"];
+ if (foundQuery) {
+ setLocalQuery(foundQuery);
+ debouncedRefine(foundQuery);
+ }
+ }, [debouncedRefine]);
+
+ useEffect(() => {
+ if (searchQuery === "") {
+ return;
+ }
+ if (inputRef.current) {
+ inputRef.current.focus();
+ }
+ }, [searchQuery]);
+
+ const handleChange = (event) => {
+ const value = event.target.value;
+ setLocalQuery(value);
+ debouncedRefine(value);
+ };
+
+ return (
+ {
+ if (event.key === "Enter") {
+ event.preventDefault();
+ }
+ }}
+ limit={5}
+ variant="outlined"
+ placeholder="Search Workflows"
+ />
+ )
+ }
+
+ const CustomSearchBox = connectSearchBox(SearchBox)
+ const CustomHits = connectHits(Hits)
+
+ const CategoryDropdown = ({ refine, currentRefinement, items }) => {
+
+ const handleChange = (event) => {
+ // Get the selected values array from the event
+ const selectedValues = event.target.value;
+ refine(selectedValues);
+ };
+
+ return (
+
+ );
+ };
+ const CustomCategoryDropdown = connectRefinementList(CategoryDropdown)
+
+
+
const WorkflowView = memo(() => {
if (workflows.length === 0) {
}
@@ -3990,363 +4195,413 @@ const Workflows2 = (props) => {
const foundPriority = userdata === undefined || userdata === null || userdata.priorities === undefined || userdata.priorities === null ? null : userdata.priorities.find(prio => prio.type === "usecase" && prio.active === true)
return (
<>
-
-
- Workflows
-
+
+
+
+ Workflows
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- //
- //
- // ),
- onKeyDown: (e) => {
- // Prevent default behavior for Enter and Backspace
- if (e.key === 'Enter' || e.key === 'Backspace') {
- e.preventDefault();
- e.stopPropagation();
- e.target.focus();
- }
- },
- }}
- clearInputOnBlur={false}
- sx={{
- // Container styling
- '& .MuiOutlinedInput-root': {
- height: "fit-content",
- borderRadius: '4px',
- backgroundColor: '#212121',
- '& fieldset': {
- borderColor: 'rgba(255, 255, 255, 0.23)',
- },
- '&:hover fieldset': {
- borderColor: 'rgba(255, 255, 255, 0.4)',
- },
- },
-
- // Adjust chip container to center vertically
- '& .MuiInputBase-root': {
- display: 'flex',
- flexWrap: 'wrap',
- gap: '4px',
- padding: '4px 8px',
- alignItems: 'center',
- height: "fit-content", // Match height
- },
-
- // Rest of the styling remains the same...
- }}
- value={filters}
- onChange={(chips) => {
- setFilters(chips);
- findWorkflow(chips);
- }}
- //onAdd={(chip) => {
- // console.log("ADd: ", chip);
- // addFilter(chip);
- //}}
- //onDelete={(_, index) => {
- // console.log("Remove: ", index);
- // removeFilter(index);
- //}}
- />
-
-
-
-
-
-
-
- navigate("/workflows/debug")}
- disabled={currTab === 2}
- >
-
-
-
-
-
- {
- const newView = view === "grid" ? "list" : "grid";
- localStorage.setItem("workflowView", newView);
- setView(newView);
- }}
- disabled={currTab === 2}
- >
- {view === "grid" ? : }
-
-
-
-
- upload.click()}
- disabled={currTab === 2}
- >
- {submitLoading ? : }
-
-
-
-
(upload = ref)}
- onChange={importFiles}
- />
-
-
- exportAllWorkflows(workflows)}
- >
-
-
-
-
-
}
+
+
- Create Workflow
-
+
+
+
+
-
- {
- isLoadingWorkflow ? (
-
+
+
+ {currTab === 2 ? (
+
) : (
- view === "grid" && currTab !== 2 ? (
- <>
-
+
+ //
+ //
+ // ),
+ onKeyDown: (e) => {
+ // Prevent default behavior for Enter and Backspace
+ if (e.key === 'Enter' || e.key === 'Backspace') {
+ e.preventDefault();
+ e.stopPropagation();
+ e.target.focus();
+ }
+ },
+ }}
+ clearInputOnBlur={false}
+ sx={{
+ // Container styling
+ '& .MuiOutlinedInput-root': {
+ height: "fit-content",
+ borderRadius: '4px',
+ backgroundColor: '#212121',
+ '& fieldset': {
+ borderColor: 'rgba(255, 255, 255, 0.23)',
+ },
+ '&:hover fieldset': {
+ borderColor: 'rgba(255, 255, 255, 0.4)',
+ },
+ },
+ // Adjust chip container to center vertically
+ '& .MuiInputBase-root': {
+ display: 'flex',
+ flexWrap: 'wrap',
+ gap: '4px',
+ padding: '4px 8px',
+ alignItems: 'center',
+ height: "fit-content", // Match height
+ backgroundColor: "#212121",
+ },
+ // Rest of the styling remains the same...
+ }}
+ value={filters}
+ onChange={(chips) => {
+ setFilters(chips);
+ const remainingCategories = chips.map(chip => {
+ const match = chip.match(/\d+\.\s+(\w+)/i);
+ return match ? match[1] : chip;
+ }).filter(category => {
+ return usecases.some(usecase =>
+ usecase.name.toLowerCase().includes(category.toLowerCase())
+ );
+ });
- {filteredWorkflows.map((data, index) => {
- // Shouldn't be a part of this list
- if (data.public === true) {
- return null
- }
+ setSelectedCategory(remainingCategories);
+ findWorkflow(chips);
+
+ }}
+ //onAdd={(chip) => {
+ // console.log("ADd: ", chip);
+ // addFilter(chip);
+ //}}
+ //onDelete={(_, index) => {
+ // console.log("Remove: ", index);
+ // removeFilter(index);
+ //}}
+ />
+ )}
- if (firstLoad) {
- workflowDelay += 75
- } else {
- return
- }
+ {
+ currTab !== 2 && (
+
-
- ) : (
- currTab !== 2 &&
+ const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length / usecase.list.length * 100) : 0
+ if (percentDone === 0) {
+ usecase = findMatches(usecase, workflows)
+ }
+
+ const category = usecase?.name.split(" ")[1]
+ return (
+
+ )
+ })}
+
)
- )
- }
+ }
+ {
+ currTab === 2 && (
+
+ )
+ }
- {
- currTab === 2 &&
- (
-
-
-
-
- )
- }
+
+
+
+ navigate("/workflows/debug")}
+ disabled={currTab === 2}
+ >
+
+
+
+
+ {
+ const newView = view === "grid" ? "list" : "grid";
+ localStorage.setItem("workflowView", newView);
+ setView(newView);
+ }}
+ disabled={currTab === 2}
+ >
+ {view === "grid" ? : }
+
+
+
+
+ upload.click()}
+ disabled={currTab === 2}
+ >
+ {submitLoading ? : }
+
+
+
+
(upload = ref)}
+ onChange={importFiles}
+ />
+
+
+ exportAllWorkflows(workflows)}
+ >
+
+
+
+
+
}
+ >
+ Create Workflow
+
+
+
+
+
+
+ {
+ (isLoadingWorkflow && currTab !== 2) ? (
+
+ ) : (
+ view === "grid" && currTab !== 2 ? (
+ <>
+
+
+
+
+ {currTab === 0 && orgWorkflows.map((data, index) => {
+ // Shouldn't be a part of this list
+ if (data.public === true) {
+ return null
+ }
+
+ // if (firstLoad) {
+ // workflowDelay += 75
+ // } else {
+ // return
+ // }
+
+ return (
+
+ {/**/}
+
+ {/**/}
+
+ )
+ })}
+
+ {
+ currTab === 1 && myWorkflows.map((data, index) => {
+ if (data.public === true) {
+ return null
+ }
+
+ // if (firstLoad) {
+ // workflowDelay += 75
+ // } else {
+ // return
+ // }
+
+ return (
+
+ {/**/}
+
+ {/**/}
+
+ )
+ })
+ }
+
+
+ ) : (
+ currTab !== 2 &&
+ )
+ )
+ }
+
+ {
+ currTab === 2 &&
+ (
+
+ )
+ }
+
+
-
+
+
);
@@ -4756,7 +5011,7 @@ const Workflows2 = (props) => {
);
// Maybe use gridview or something, idk
- return
{loadedCheck}
;
+ return
{loadedCheck}
;
};