From 8c1da8ea4e5e1de1918efa86df45fd63c5e97054 Mon Sep 17 00:00:00 2001 From: monilprajapati Date: Tue, 26 Nov 2024 17:25:02 +0530 Subject: [PATCH] Added Half usecases stuff on appmodal --- frontend/src/components/AppModal.jsx | 322 ++++++++++++++++++++++++--- frontend/src/views/Apps2.jsx | 2 +- frontend/src/views/LoginPage.jsx | 5 +- 3 files changed, 299 insertions(+), 30 deletions(-) diff --git a/frontend/src/components/AppModal.jsx b/frontend/src/components/AppModal.jsx index 897d85fc..a4bd272f 100644 --- a/frontend/src/components/AppModal.jsx +++ b/frontend/src/components/AppModal.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Dialog, DialogTitle, @@ -13,15 +13,258 @@ import { import CloseIcon from '@mui/icons-material/Close'; import EditIcon from '@mui/icons-material/Edit'; +import Search from '@mui/icons-material/Search'; +import AddIcon from '@mui/icons-material/Add'; import ForkRightIcon from '@mui/icons-material/ForkRight'; import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import LaunchIcon from '@mui/icons-material/Launch'; import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import { CloudDownloadOutlined } from '@mui/icons-material'; +import { findSpecificApp } from './AppFramework'; -const AppModal = ({ open, onClose, app, userdata }) => { +const AppModal = ({ open, onClose, app, userdata, globalUrl }) => { - console.log("App data: ", app) + const [frameworkData, setFrameworkData] = useState({}) + const [usecases, setUsecases] = useState([]) + const [workflows, setWorkflows] = useState([]) + const [prevSubcase, setPrevSubcase] = useState({}) + const [inputUsecase, setInputUsecase] = useState({}) + const [latestUsecase, setLatestUsecase] = useState([]) + const [foundAppUsecase, setFoundAppUsecase] = useState({}) + + const parseUsecase = (subcase) => { + const srcdata = findSpecificApp(frameworkData, subcase.type) + const dstdata = findSpecificApp(frameworkData, subcase.last) + + if (srcdata !== undefined && srcdata !== null) { + subcase.srcimg = srcdata.large_image + subcase.srcapp = srcdata.name + } + + if (dstdata !== undefined && dstdata !== null) { + subcase.dstimg = dstdata.large_image + subcase.dstapp = dstdata.name + } + return subcase + } + + + 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) { + const preparedData = { + "siem": findSpecificApp({}, "SIEM"), + "communication": findSpecificApp({}, "COMMUNICATION"), + "assets": findSpecificApp({}, "ASSETS"), + "cases": findSpecificApp({}, "CASES"), + "network": findSpecificApp({}, "NETWORK"), + "intel": findSpecificApp({}, "INTEL"), + "edr": findSpecificApp({}, "EDR"), + "iam": findSpecificApp({}, "IAM"), + "email": findSpecificApp({}, "EMAIL"), + } + + setFrameworkData(preparedData) + } else { + setFrameworkData(responseJson) + } + }) + .catch((error) => { + console.log("Error getting framework: ", error) + }) + } + + 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) => { + + + const newUsecases = [...usecases] + newUsecases.forEach((category, index) => { + category.list.forEach((subcase, subindex) => { + getUsecase(subcase, index, subindex) + }) + }) + + setLatestUsecase(newUsecases) + // Matching workflows with usecases + if (responseJson.success !== false) { + if (workflows !== undefined && workflows !== null && workflows.length > 0) { + var categorydata = responseJson + + 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()) { + + category.matches.push({ + "workflow": workflow.id, + "category": subcategory?.name, + }) + + subcategory.matches.push(workflow) + break + } + } + } + + if (subcategory.matches.length > 0) { + break + } + } + } + + newcategories.push(category) + } + + if (newcategories !== undefined && newcategories !== null && newcategories.length > 0) { + setUsecases(newcategories) + } else { + setUsecases(responseJson) + } + } else { + setUsecases(responseJson) + } + } + }) + .catch((error) => { + //toast("ERROR: " + error.toString()); + console.log("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) { + fetchUsecases() + console.log("Status not 200 for workflows :O!: ", response.status); + return; + } + + return response.json(); + }) + .then((responseJson) => { + fetchUsecases(responseJson) + + if (responseJson !== undefined) { + setWorkflows(responseJson); + } + }) + .catch((error) => { + fetchUsecases() + //toast(error.toString()); + }); + } + + const getUsecase = (subcase, index, subindex) => { + subcase = parseUsecase(subcase) + setPrevSubcase(subcase) + + fetch(`${globalUrl}/api/v1/workflows/usecases/${escape(subcase?.name?.replaceAll(" ", "_"))}`, { + 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) => { + var parsedUsecase = responseJson + + if (responseJson.success === false) { + parsedUsecase = subcase + } else { + parsedUsecase = responseJson + + parsedUsecase.srcimg = subcase.srcimg + parsedUsecase.srcapp = subcase.srcapp + parsedUsecase.dstimg = subcase.dstimg + parsedUsecase.dstapp = subcase.dstapp + } + // Look for the type of app and fill in img1, srcapp... + setInputUsecase(parsedUsecase) + }) + .catch((error) => { + //toast(error.toString()); + setInputUsecase(subcase) + console.log("Error getting usecase: ", error) + }) + } + + + + useEffect(() => { + getAvailableWorkflows() + getFramework() + }, [app]) + + + useEffect(() => { + const foundCategory = latestUsecase?.find((category) => + category?.list?.some((subcase) => subcase?.srcapp === app?.name || subcase?.dstapp === app?.name) + ); + + const foundSubcase = foundCategory?.list?.find( + (subcase) => subcase?.srcapp === app?.name || subcase?.dstapp === app?.name + ); + + setFoundAppUsecase(foundSubcase); + }, [latestUsecase]) const isCloud = window.location.host === "localhost:3002" || @@ -34,7 +277,7 @@ const AppModal = ({ open, onClose, app, userdata }) => { newAppname = "Undefined"; } else { newAppname = newAppname.charAt(0).toUpperCase() + newAppname.substring(1); - newAppname = newAppname.replaceAll("_", " "); + newAppname = newAppname?.replaceAll("_", " "); } var canEditApp = userdata.admin === "true" || userdata.id === app?.owner || app?.owner === "" || (userdata.admin === "true" && userdata.active_org.id === app?.reference_org) || !app?.generated @@ -250,7 +493,13 @@ const AppModal = ({ open, onClose, app, userdata }) => { color: "#fff", marginBottom: "5px" }}> - Connect Gmail to Jira + { + (foundAppUsecase?.srcapp !== undefined && foundAppUsecase?.dstapp !== undefined) ? ( + "Connect " + foundAppUsecase?.srcapp?.replaceAll("_", " ") + " to " + foundAppUsecase?.dstapp?.replaceAll("_", " ") + ) : ( + "Connect " + app?.name + " to any tool" + ) + } { mb: 3 }}> - - + { + foundAppUsecase === undefined ? ( + + + + ) : ( + + ) + } + { + foundAppUsecase === undefined ? ( + + + + ) : ( + + ) + } - - Email management + + {foundAppUsecase?.name || "Search for a Usecase"} diff --git a/frontend/src/views/Apps2.jsx b/frontend/src/views/Apps2.jsx index 2a8ebe3d..7011be79 100644 --- a/frontend/src/views/Apps2.jsx +++ b/frontend/src/views/Apps2.jsx @@ -939,7 +939,6 @@ const Apps2 = (props) => { queryParams.set('tab', newQueryParam); queryParams.delete('q'); window.history.replaceState({}, '', `${location.pathname}?${queryParams.toString()}`); - console.log("Apps to show", appsToShow) }; @@ -982,6 +981,7 @@ const Apps2 = (props) => { onClose={handleAppModalClose} app={selectedApp} userdata={userdata} + globalUrl={globalUrl} />
diff --git a/frontend/src/views/LoginPage.jsx b/frontend/src/views/LoginPage.jsx index 30655d1a..c1498b7e 100755 --- a/frontend/src/views/LoginPage.jsx +++ b/frontend/src/views/LoginPage.jsx @@ -183,7 +183,10 @@ const LoginDialog = (props) => { if (responseJson.tutorials === undefined || responseJson.tutorials === null || !responseJson.tutorials.includes("welcome")) { console.log("RUN Welcome!!") - window.location.pathname = "/welcome?tab=2" + setTimeout(() => { + navigate("/welcome?tab=2") + },200) + // window.location.pathname = "" return }