From 36f9ed26c279c3f1875ff16f51a84307eac3ec13 Mon Sep 17 00:00:00 2001 From: frikky Date: Sun, 20 Feb 2022 19:03:58 +0100 Subject: [PATCH] #709: Added usecase discovery and mapping on /usecases path --- frontend/src/App.jsx | 4 +- frontend/src/components/Header.js | 11 ++ frontend/src/views/Dashboard.jsx | 152 ++++++++++++--- frontend/src/views/GettingStarted.jsx | 7 +- frontend/src/views/SettingsPage.jsx | 29 +-- frontend/src/views/Workflows.jsx | 271 ++++++++++++++------------ 6 files changed, 301 insertions(+), 173 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 5448777e..1fe81088 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -85,7 +85,7 @@ const App = (message, props) => { !window.location.pathname.startsWith("/docs") && !window.location.pathname.startsWith("/detectionframework") && !window.location.pathname.startsWith("/adminsetup") && - !window.location.pathname.startsWith("/dashboard") + !window.location.pathname.startsWith("/usecases") ) { window.location = "/login"; } @@ -407,7 +407,7 @@ const App = (message, props) => { /> { Get Started + { + event.preventDefault(); + handleClose(); + }} + > + + Use Cases + + { event.preventDefault(); diff --git a/frontend/src/views/Dashboard.jsx b/frontend/src/views/Dashboard.jsx index ee9327ec..1cb9f4a7 100644 --- a/frontend/src/views/Dashboard.jsx +++ b/frontend/src/views/Dashboard.jsx @@ -10,15 +10,18 @@ import { useAlert } from "react-alert"; import { Typography, + Grid, + Paper, + Chip, } from "@material-ui/core"; // core components -import { - chartExample1, - chartExample2, - chartExample3, - chartExample4, -} from "../charts.js"; +//import { +// chartExample1, +// chartExample2, +// chartExample3, +// chartExample4, +//} from "../charts.js"; import { RadialBarChart, @@ -298,6 +301,47 @@ const categorydata = [ } ] +const UsecaseListComponent = ({keys}) => { + if (keys === undefined || keys === null || keys.length === 0) { + return null + } + + return ( +
+ + Shuffle usecases + + + Usecases in Shuffle are divided into {keys.length} type{keys.length === 1 ? "" : "s"}. + + {keys.map((usecase, index) => { + return ( +
+ + {usecase.name} + + + {usecase.list.map((subcase, subindex) => { + return ( + + { + console.log("Clicked: ", subcase.name) + }}> + + {subcase.name} + + + + ) + })} + +
+ ) + })} +
+ ) +} + const TreeChart = ({keys}) => { const [hovered, setHovered] = useState(""); @@ -307,8 +351,6 @@ const TreeChart = ({keys}) => { }}> { } -const RadialChart = ({keys}) => { +const RadialChart = ({keys, setSelectedCategory}) => { const [hovered, setHovered] = useState(""); return (
{ console.log("Click: ", hovered) + if (setSelectedCategory !== undefined) { + setSelectedCategory(hovered) + } }}> { data={keys} axis={} series={ - { + console.log("Color: ", colorInput) + return '#f86a3e' + }} animated={false} id="workflow_series_id" style={{cursor: "pointer",}} @@ -381,7 +428,6 @@ const RadialChart = ({keys}) => { }} isRadial={true} onValueEnter={(event) => { - console.log("Entered: ", event.value.x) if (hovered !== event.value.x) { setHovered(event.value.x) } @@ -394,7 +440,7 @@ const RadialChart = ({keys}) => { }} content={(data, color) => { return ( -
+
{data.x} @@ -438,15 +484,24 @@ const Dashboard = (props) => { const [keys, setKeys] = useState([]) const [treeKeys, setTreeKeys] = useState([]) - //const keys = [ - // { key: '1. Collect & Distribute', data: 2 }, - // { key: '2. Enrich', data: 11 }, - // { key: '3. Detect', data: 3 }, - // { key: '4. Respond', data: 4 }, - // { key: 'Validation', data: 7, color: "red",}, - //] + const [selectedUsecaseCategory, setSelectedUsecaseCategory] = useState(""); + const [selectedUsecases, setSelectedUsecases] = useState([]); + const [usecases, setUsecases] = useState([]); - document.title = "Shuffle - dashboard"; + useEffect(() => { + console.log("Changed: ", selectedUsecaseCategory) + if (selectedUsecaseCategory.length === 0) { + setSelectedUsecases(usecases) + } else { + const foundUsecase = usecases.find(data => data.name === selectedUsecaseCategory) + if (foundUsecase !== undefined && foundUsecase !== null) { + console.log("FOUND: ", foundUsecase) + setSelectedUsecases([foundUsecase]) + } + } + }, [selectedUsecaseCategory]) + + document.title = "Shuffle - usecases"; 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]; @@ -455,8 +510,7 @@ const Dashboard = (props) => { var treeCategories = [] for (key in categorydata) { const category = categorydata[key] - console.log("cat: ", category) - allCategories.push({"key": category.name, "data": category.list.length,}) + 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}) @@ -487,6 +541,8 @@ const Dashboard = (props) => { if (responseJson.success !== false) { console.log("Usecases: ", responseJson) handleKeysetting(responseJson) + setUsecases(responseJson) + setSelectedUsecases(responseJson) } }) .catch((error) => { @@ -748,20 +804,52 @@ const Dashboard = (props) => { ) : null; const data = ( -
- {keys.length > 0 ? - +
+
+ {keys.length > 0 ? + + : null} +
+ + {usecases !== null && usecases !== undefined && usecases.length > 0 ? +
+ {usecases.map((usecase, index) => { + return ( + { + console.log("Clicked: ", usecase.name) + if (selectedUsecaseCategory === usecase.name) { + setSelectedUsecaseCategory("") + } else { + setSelectedUsecaseCategory(usecase.name) + } + //addFilter(usecase.name.slice(3,usecase.name.length)) + }} + variant="outlined" + color="primary" + /> + ) + })} +
: null} + + {treeKeys.length > 0 ? : null} - {/* - - */} {newdata}
diff --git a/frontend/src/views/GettingStarted.jsx b/frontend/src/views/GettingStarted.jsx index 03c6f280..0821ac7e 100644 --- a/frontend/src/views/GettingStarted.jsx +++ b/frontend/src/views/GettingStarted.jsx @@ -2160,7 +2160,7 @@ const GettingStarted = (props) => { }) } }}> - Discover your apps by following our simple security model! + Find relevant apps and start your automation journey ), tutorial: "find_integrations", @@ -2168,7 +2168,8 @@ const GettingStarted = (props) => { { html: - Discover { + Discover Use Case ideas and  + { if (isCloud) { navigate(`/search?tab=workflows`) @@ -2193,7 +2194,7 @@ const GettingStarted = (props) => { alert.success("TBD: Coming in version 1.0.0"); } }}> - use-cases made by other creators! + workflows made by other creators! , tutorial: "discover_workflows", }, diff --git a/frontend/src/views/SettingsPage.jsx b/frontend/src/views/SettingsPage.jsx index 3d218761..46325bb4 100644 --- a/frontend/src/views/SettingsPage.jsx +++ b/frontend/src/views/SettingsPage.jsx @@ -731,17 +731,22 @@ const Settings = (props) => {
{isCloud ? - + + + By connecting your Github account, you agree to our Terms of Service, and acknowledge that your non-sensitive data will be turned into a creator account. This enables you to earn a passive income from Shuffle. This IS reversible. + + + : null}
@@ -861,7 +866,7 @@ const Settings = (props) => { handleEthereumConnection(); }} > - Authenticate + Authenticate Metamask Wallet )}
diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx index 98b8ee0c..d09ed42b 100644 --- a/frontend/src/views/Workflows.jsx +++ b/frontend/src/views/Workflows.jsx @@ -2475,58 +2475,60 @@ const Workflows = (props) => { setNewWorkflowTags(newWorkflowTags); }} /> - - Usecases - selected.join(', ')} + onChange={(event) => { + console.log("Changed: ", event) + }} + > + + None + + {usecases.map((usecase, index) => { + console.log(usecase) + return ( + + + {usecase.name} + + {usecase.list.map((subcase, subindex) => { + //console.log(subcase) + total_count += 1 + return ( + { + if (selectedUsecases.includes(subcase.name)) { + const itemIndex = selectedUsecases.indexOf(subcase.name) + if (itemIndex > -1) { + selectedUsecases.splice(itemIndex, 1) + } + } else { + selectedUsecases.push(subcase.name) } - } else { - selectedUsecases.push(subcase.name) - } - setUpdate(Math.random()); - setSelectedUsecases(selectedUsecases) - }}> - - - - ) - })} - - ) - })} - - + setUpdate(Math.random()); + setSelectedUsecases(selectedUsecases) + }}> + + + + ) + })} + + ) + })} + + + : null}
{showMoreClicked ? @@ -2643,7 +2645,7 @@ const Workflows = (props) => { {view === "list" && ( ) : (