+ {
+ e.stopPropagation();
+ window.open(`${window.location.origin}/usecases/${usecase.name.toLowerCase().replaceAll(" ", "_")}`, "_blank");
+ }}
+ sx={{
+ color: theme.palette.primary.main,
+ cursor: "pointer",
+ }}
+ />
{
@@ -414,9 +777,11 @@ const UsecaseCard = ({ usecase, handleToggle, handleOpenDialog, handleDeleteUsec
);
};
-const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPartnerData }) => {
+const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPartnerData, selectedTab }) => {
const { themeMode } = useContext(Context);
const theme = getTheme(themeMode);
+ const isArticlesTab = selectedTab?.toLowerCase() === "articles";
+ const entityLabel = isArticlesTab ? "Article" : "Usecase";
// Dialog state
const [openDialog, setOpenDialog] = useState(false);
@@ -438,12 +803,13 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
navigation: {
items: [
{
- name: "About Usecase",
+ name: `About ${entityLabel}`,
content: [""],
},
],
},
public: false,
+ created: null,
});
// App categories for dropdowns
@@ -458,6 +824,11 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
{ value: "assets", label: "Assets" },
{ value: "intel", label: "Intel" },
{ value: "email", label: "Email" },
+ {value: "webhook", label: "Webhook"},
+ {value: "schedule", label: "Schedule"},
+ {value: "pipelines", label: "Pipelines"},
+ {value: "shuffle workflow", label: "Shuffle Workflow"},
+ {value: "user input", label: "User Input"},
{ value: "other", label: "Other" }
];
@@ -505,7 +876,9 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
description: usecase.mainContent?.description,
navigation: usecase.navigation || { items: [] },
categories: usecase.mainContent?.categories || [],
- public: usecase?.public || false,
+ public: usecase?.public || false,
+ created: usecase?.created || null,
+ headerImage: getFirstImageFromNavigation(usecase.navigation),
}));
if (usecases.length > 0) {
setUsecaseData(usecases);
@@ -526,7 +899,195 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
// Sample categories
const categoryOptions = ["Collect","Enrich", "Detect", "Respond", "Verify"];
+ // Uploading image to the public bucket
+ const handleImageUpload = async (imageData) => {
+ const folderName = "usecase_images";
+ const usecaseId = formData?.id || partnerData?.id || "usecase";
+
+ try {
+ const response = await fetch(`${globalUrl}/api/v1/image_upload`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ credentials: "include",
+ body: JSON.stringify({
+ imageData,
+ folder: folderName,
+ id: usecaseId,
+ }),
+ });
+
+ // if (response.status !== 200) {
+ // toast.error("Failed to upload image" + response?.reason);
+ // return null;
+ // }
+
+ const responseJson = await response.json();
+ if (!responseJson?.success || !responseJson?.url) {
+ toast.error("Failed to upload image: " + responseJson?.reason);
+ return null;
+ }
+
+ return responseJson.url;
+ } catch (error) {
+ toast.error("Failed to upload image" + error?.message);
+ return null;
+ }
+ };
+
+ // This function is used to update the content with the public image url
+ const updateContentWithImageUrl = (itemIndex, contentIndex, imageUrl) => {
+ setFormData((prevData) => {
+ const newItems = [...(prevData.navigation.items || [])];
+ const item = newItems[itemIndex];
+ if (!item) {
+ return prevData;
+ }
+
+ const contents = [...(item.content || [])];
+ const existingContent = contents[contentIndex] || "";
+ const markdownImage = imageUrl ? `` : "";
+
+ const placeholderIndex = existingContent.indexOf(IMAGE_UPLOAD_PLACEHOLDER);
+ if (placeholderIndex !== -1) {
+ const before = existingContent.slice(0, placeholderIndex);
+ const after = existingContent.slice(
+ placeholderIndex + IMAGE_UPLOAD_PLACEHOLDER.length,
+ );
+
+ const trimmedBefore = before.replace(/\s*$/, "");
+ const needsNewline =
+ trimmedBefore.length > 0 && !trimmedBefore.endsWith("\n");
+ const separator = needsNewline ? "\n" : "";
+
+ contents[contentIndex] = `${trimmedBefore}${separator}${markdownImage}${after}`;
+ } else {
+ const needsNewline =
+ existingContent.length > 0 && !existingContent.endsWith("\n");
+ const separator = needsNewline ? "\n" : "";
+
+ contents[contentIndex] = `${existingContent}${separator}${markdownImage}`;
+ }
+
+ newItems[itemIndex] = {
+ ...item,
+ content: contents,
+ };
+
+ return {
+ ...prevData,
+ navigation: {
+ items: newItems,
+ },
+ };
+ });
+ };
+
+ // This function is used to insert the image placeholder (Uploading image...) in the content to show that the image is being uploaded
+ const insertImagePlaceholder = (itemIndex, contentIndex) => {
+ setFormData((prevData) => {
+ const newItems = [...(prevData.navigation.items || [])];
+ const item = newItems[itemIndex];
+ if (!item) {
+ return prevData;
+ }
+
+ const contents = [...(item.content || [])];
+ const existingContent = contents[contentIndex] || "";
+ const needsNewline =
+ existingContent.length > 0 && !existingContent.endsWith("\n");
+ const separator = needsNewline ? "\n" : "";
+
+ contents[contentIndex] = `${existingContent}${separator}${IMAGE_UPLOAD_PLACEHOLDER}`;
+
+ newItems[itemIndex] = {
+ ...item,
+ content: contents,
+ };
+
+ return {
+ ...prevData,
+ navigation: {
+ items: newItems,
+ },
+ };
+ });
+ };
+
+ // This function is used to process the image file and upload it to the public bucket
+ const processImageFile = (imageFile, itemIndex, contentIndex) => {
+ const reader = new FileReader();
+ reader.onload = async (loadEvent) => {
+ const imageData = loadEvent.target?.result;
+ if (!imageData) {
+ toast.error("Failed to read image");
+ updateContentWithImageUrl(itemIndex, contentIndex, "");
+ return;
+ }
+
+ const imageUrl = await handleImageUpload(imageData);
+ if (!imageUrl) {
+ // Clean up the placeholder if upload failed
+ updateContentWithImageUrl(itemIndex, contentIndex, "");
+ return;
+ }
+
+ updateContentWithImageUrl(itemIndex, contentIndex, imageUrl);
+ };
+ reader.readAsDataURL(imageFile);
+ };
+
+ // This function is used to handle the image paste event
+ const handleContentPaste = async (event, itemIndex, contentIndex) => {
+ const items = event.clipboardData?.items;
+ if (!items || items.length === 0) {
+ return;
+ }
+
+ let imageFile = null;
+ for (let i = 0; i < items.length; i += 1) {
+ const item = items[i];
+ if (item.kind === "file" && item.type.startsWith("image/")) {
+ imageFile = item.getAsFile();
+ break;
+ }
+ }
+
+ if (!imageFile) {
+ return;
+ }
+
+ event.preventDefault();
+
+ insertImagePlaceholder(itemIndex, contentIndex);
+ processImageFile(imageFile, itemIndex, contentIndex);
+ };
+
+ // This function is used to handle the image drop event
+ const handleContentDrop = async (event, itemIndex, contentIndex) => {
+ event.preventDefault();
+
+ const files = event.dataTransfer?.files;
+ if (!files || files.length === 0) {
+ return;
+ }
+
+ const imageFile = Array.from(files).find((file) => file.type.startsWith("image/"));
+ if (!imageFile) {
+ toast.error("Failed to upload image, only images are supported");
+ return;
+ }
+
+ insertImagePlaceholder(itemIndex, contentIndex);
+ processImageFile(imageFile, itemIndex, contentIndex);
+ };
+
const getUserProfileWorkflows = (orgId) => {
+ if (selectedTab === "articles") {
+ return;
+ }
setIsWorkflowLoading(true);
fetch(`${globalUrl}/api/v1/partners/${orgId}/workflows`, {
method: "GET",
@@ -713,12 +1274,13 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
navigation: usecase?.navigation || {
items: [
{
- name: "About Usecase",
+ name: `About ${entityLabel}`,
content: [""],
},
],
},
public: usecase?.public || false,
+ created: usecase?.created || Math.floor(Date.now() / 1000),
});
setOpenDialog(true);
};
@@ -753,15 +1315,15 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
const validationErrors = [];
// Check for public workflow selection
- if (!formData.mainContent.publicWorkflowId || formData.mainContent.publicWorkflowId.trim() === "") {
+ if (!isArticlesTab && (!formData.mainContent.publicWorkflowId || formData.mainContent.publicWorkflowId.trim() === "")) {
validationErrors.push("Please select a public workflow");
}
- if (!formData.mainContent.sourceAppType || formData.mainContent.sourceAppType.trim() === "") {
+ if (!isArticlesTab && (!formData.mainContent.sourceAppType || formData.mainContent.sourceAppType.trim() === "")) {
validationErrors.push("Source app type is required");
}
- if (!formData.mainContent.destinationAppType || formData.mainContent.destinationAppType.trim() === "") {
+ if (!isArticlesTab && (!formData.mainContent.destinationAppType || formData.mainContent.destinationAppType.trim() === "")) {
validationErrors.push("Destination app type is required");
}
@@ -783,7 +1345,7 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
}
// Check categories
- if (!formData.mainContent.categories || !Array.isArray(formData.mainContent.categories) || formData.mainContent.categories.length === 0) {
+ if (!isArticlesTab && (!formData.mainContent.categories || !Array.isArray(formData.mainContent.categories) || formData.mainContent.categories.length === 0)) {
validationErrors.push("At least one category must be selected");
}
@@ -846,7 +1408,6 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
return res.json();
})
.then((responseData) => {
- console.log("Response data:", responseData);
// Reset loading state
setIsSubmitting(false);
@@ -863,7 +1424,9 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
description: formData.mainContent?.description.trim(),
categories: formData.mainContent?.categories || [],
navigation: formData.navigation || {},
- public: formData?.public || false,
+ public: formData?.public || false,
+ created: formData?.created || null,
+ headerImage: getFirstImageFromNavigation(formData.navigation),
}
setUsecaseData((prevData) => {
@@ -921,6 +1484,28 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
});
};
+ // This is used to filter the usecases based on the selected tab
+ const filteredUsecases = Array.isArray(usecaseData)
+ ? usecaseData.filter((usecase) => {
+ const hasWorkflowId =
+ !!usecase.publicWorkflowId &&
+ usecase.publicWorkflowId.toString().trim() !== "";
+
+ if (selectedTab === "articles") {
+ // Articles: only items without a public workflow ID
+ return !hasWorkflowId;
+ }
+
+ if (selectedTab === "usecases") {
+ // Usecases: only items with a public workflow ID
+ return hasWorkflowId;
+ }
+
+ // Fallback: show all
+ return true;
+ })
+ : [];
+
return (
- {/* Add Usecase Button */}
+ {/* Add Usecase / Article Button */}
- Usecases
+ {selectedTab === "usecases" && "Usecases"}
+ {selectedTab === "articles" && "Articles"}
}
- disabled={isWorkflowLoading}
onClick={handleOpenDialog}
sx={{
px: 3,
@@ -961,11 +1546,11 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
fontWeight: 600,
}}
>
- Add Usecase
+ {isArticlesTab ? "Add Article" : "Add Usecase"}
- {/* Usecases Grid */}
+ {/* Usecases / Articles Grid */}
{isLoading ? (
// Skeleton loading state
{/* Display 4 skeleton cards while loading */}
{[...Array(4)].map((_, index) => (
-
- ) : usecaseData.length > 0 ? (
- // Actual data display
+ ) : filteredUsecases.length > 0 ? (
+ // Actual data display (filtered based on public workflow ID)
- {usecaseData.map((usecase) => (
+ {filteredUsecases.map((usecase) => (
@@ -1027,7 +1614,7 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
color: "#FFFFFF",
}}
>
- No usecases found
+ {isArticlesTab ? "No articles found" : "No usecases found"}
)}
@@ -1064,7 +1651,7 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
}}
>
- {formData?.id ? "Update" : "Add New"} Usecase : {formData?.public ? "Published" : "Draft"}
+ {formData?.id ? "Update" : "Add New"} {entityLabel} : {formData?.public ? "Published" : "Draft"}
+ {!isArticlesTab && (
+ )}
+
+ {/* Other data selection (use all data types) */}
+ {!isArticlesTab && (
+
+
+
+ Coming soon: Files (detection)
+
+
+
+
+
+ Coming soon: Datastore category (threatlists)
+
+
+
+ )}
{/* App Type Selection */}
-
+ {!isArticlesTab && (
+
+
+ )}
+ )}
@@ -1648,7 +2271,7 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
{
const newItems = [...formData.navigation.items];
@@ -1659,12 +2282,15 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
navigation: { items: newItems },
});
}}
+ onPaste={(event) => handleContentPaste(event, itemIndex, contentIndex)}
+ onDrop={(event) => handleContentDrop(event, itemIndex, contentIndex)}
+ onDragOver={(event) => event.preventDefault()}
placeholder="Content (Markdown supported)"
helperText={
- Markdown syntax is supported
+ Markdown syntax is supported and Use ### for subItem for Table of Contents. Drag and drop or paste images to the content to upload them.
}
@@ -1708,7 +2334,7 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
)}
))}
-
+{/*
}
onClick={() => {
@@ -1725,7 +2351,7 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
}}
>
Add Paragraph
-
+ */}
))}
@@ -1791,7 +2417,7 @@ const PartnersUsecasesTab = ({ isCloud, globalUrl, userdata, partnerData, setPar
>
{isSubmitting
? (formData?.id ? "Updating..." : "Adding...")
- : (formData?.id ? "Update Usecase" : "Add Usecase")
+ : (formData?.id ? `Update ${entityLabel}` : `Add ${entityLabel}`)
}
diff --git a/frontend/src/components/Priority.jsx b/frontend/src/components/Priority.jsx
index d5fb4432..508ecff6 100644
--- a/frontend/src/components/Priority.jsx
+++ b/frontend/src/components/Priority.jsx
@@ -25,7 +25,7 @@ const Priority = (props) => {
const { globalUrl, clickedFromOrgTab,userdata, serverside, priority, checkLogin, setAdminTab, setCurTab, appFramework, } = props;
const { themeMode, supportEmail } = useContext(Context);
const theme = getTheme(themeMode);
- const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
let navigate = useNavigate();
if (window.location.pathname === "/workflows") {
diff --git a/frontend/src/components/RunsOverTimeWidget.jsx b/frontend/src/components/RunsOverTimeWidget.jsx
index c68511e0..523a34ee 100644
--- a/frontend/src/components/RunsOverTimeWidget.jsx
+++ b/frontend/src/components/RunsOverTimeWidget.jsx
@@ -1,7 +1,25 @@
import React, { useEffect, useMemo, useState } from 'react';
-import { Typography, ToggleButton, ToggleButtonGroup, Select, MenuItem, FormControl, InputLabel, Box } from '@mui/material';
+import { makeStyles, } from "@mui/styles";
+import {
+ Typography,
+ ToggleButton,
+ ToggleButtonGroup,
+ Select,
+ MenuItem,
+ FormControl,
+ InputLabel,
+ Box,
+ Autocomplete,
+ TextField,
+ Tooltip,
+ IconButton,
+} from '@mui/material';
import { BarChart, BarSeries, Bar, GridlineSeries, Gridline, TooltipArea, ChartTooltip, LinearYAxis, LinearYAxisTickSeries, LinearYAxisTickLabel } from 'reaviz';
import theme from '../theme.jsx';
+import {green, yellow, red} from "../views/AngularWorkflow.jsx"
+import {
+ OpenInNew as OpenInNewIcon,
+} from '@mui/icons-material';
// Compact number formatter for axis ticks (e.g. 12,000 -> 12k, 12,000,000 -> 12M)
function formatCompactNumber(value) {
@@ -59,34 +77,128 @@ function computeTodayValueForOrg(key, orgStats) {
const RunsOverTimeWidget = (props) => {
const { globalUrl, onLoadingChange, monthOverride, dummyMode, selectedOrganization, selectedOrgForStats, orgStats, orgForLimit, loadingSelectedOrgStats } = props;
const [mode, setMode] = useState('workflows'); // 'apps' | 'workflows'
+ const [selectedStatType, setSelectedStatType] = useState({
+ "value": 'total_workflow_executions',
+ "label": 'Workflows',
+ "amount": 0,
+ })
const [series, setSeries] = useState([]);
const [days, setDays] = useState(365); // aggregate to last 12 months by default
const [selectedMonth, setSelectedMonth] = useState(null); // Date representing first day of target month, or null for yearly view
+ const [statTypeOptions, setStatTypeOptions] = useState([])
const [loading, setLoading] = useState(false);
+ const useStyles = makeStyles({
+ notchedOutline: {
+ borderColor: "#FF8544 !important",
+ },
+ root: {
+ "& .MuiAutocomplete-listbox": {
+ border: "2px solid #FF8544",
+ color: theme.palette.text.primary,
+ fontSize: 18,
+ "& li:nth-child(even)": {
+ backgroundColor: "#CCC",
+ },
+ "& li:nth-child(odd)": {
+ backgroundColor: "#FFF",
+ },
+ },
+ },
+ inputRoot: {
+ color: theme.palette.text.primary,
+ "&:hover .MuiOutlinedInput-notchedOutline": {
+ borderColor: "#f86a3e",
+ },
+ },
+ });
+ const classes = useStyles();
// Helper: fetch time series for a specific statistics key
const fetchSeriesForKey = async (key) => {
+
+ if (statTypeOptions?.length < 3) {
+ var foundkeys = {}
+ for (var key in orgStats) {
+ if (!key.startsWith("total_")) {
+ continue
+ }
+
+ // Remove total
+ foundkeys[key] = orgStats[key]
+ }
+
+ for (var foundKey in orgStats?.daily_statistics) {
+ const dailyStats = orgStats?.daily_statistics[foundKey]
+
+ for (var additionKey in dailyStats?.additions) {
+ const addition = dailyStats?.additions[additionKey];
+ if (foundkeys[addition?.key] === undefined) {
+ foundkeys[addition?.key] = addition?.value
+ } else {
+ foundkeys[addition?.key] += addition?.value
+ }
+ }
+ }
+
+ var newarray = []
+ for (var key in foundkeys) {
+ const foundkey = key
+
+ var parsedname = key
+ if (parsedname?.startsWith("total_")) {
+ parsedname = parsedname.replace("total_", "")
+ }
+
+ if (parsedname?.startsWith("categorylabel")) {
+ parsedname = parsedname.replace("categorylabel", "")
+ }
+
+ parsedname = (parsedname.charAt(0).toUpperCase() + parsedname.substring(1)).replaceAll("_", " ")
+
+ newarray.push({
+ "value": key,
+ "label": parsedname,
+ "amount": foundkeys[key],
+ })
+ }
+
+ if (newarray.length > 0) {
+ setStatTypeOptions(newarray)
+ }
+ }
+
try {
// If specific org is selected and pre-fetched stats are available, use them directly
if (selectedOrgForStats && selectedOrgForStats !== 'ALL' && orgStats && Array.isArray(orgStats?.daily_statistics)) {
+
const dailyStats = orgStats.daily_statistics;
const processedEntries = [];
const cutoff = new Date();
cutoff.setDate(cutoff.getDate() - days);
+ if (key.startsWith("total_")) {
+ key = key.replace("total_", "")
+ }
+
for (const day of dailyStats) {
if (!day?.date) continue;
const dayDate = new Date(day.date);
if (dayDate < cutoff) continue;
let value = 0;
- if (key === 'workflow_executions') {
- const finished = Number(day?.workflow_executions_finished || 0);
- const failed = Number(day?.workflow_executions_failed || 0);
- value = finished + failed;
- } else {
- value = Number(day?.[key] || 0);
- }
+
+ if (day[key] === undefined) {
+ for (var additionKey in day?.additions) {
+ const addition = day?.additions[additionKey];
+ if (addition?.key === key) {
+ value += Number(addition?.value || 0);
+ break
+ }
+ }
+ } else {
+ value = Number(day[key] || 0);
+ }
+
processedEntries.push({ date: day.date, value });
}
@@ -185,7 +297,7 @@ function computeTodayValueForOrg(key, orgStats) {
};
// Load and transform into monthly aggregation for last 12 months
- const load = async (curMode) => {
+ const loadStats = async (curMode, inputType) => {
setLoading(true);
try {
// Clear current series immediately to avoid any visual overlap while switching views
@@ -203,8 +315,10 @@ function computeTodayValueForOrg(key, orgStats) {
setSeries(dummy);
return;
}
- const key = curMode === 'apps' ? 'app_executions' : 'workflow_executions';
+
+ const key = inputType !== undefined ? inputType : selectedStatType?.value?.length > 0 ? selectedStatType?.value : curMode === 'apps' ? 'app_executions' : 'workflow_executions';
const entries = await fetchSeriesForKey(key);
+
// Normalize variants: {Date, Value} or {date, value}
const normalized = (entries || []).map((d) => ({
date: d?.Date ? new Date(d.Date) : (d?.date ? new Date(d.date) : new Date()),
@@ -272,6 +386,23 @@ function computeTodayValueForOrg(key, orgStats) {
}
};
+
+ useEffect(() => {
+ setTimeout(() => {
+ const starterWidgetStatType = localStorage.getItem("runsOverTimeWidgetStatType")
+ if (starterWidgetStatType) {
+ setSelectedStatType({
+ "value": starterWidgetStatType,
+ "label": (starterWidgetStatType.charAt(0).toUpperCase() + starterWidgetStatType.substring(1)).replaceAll("_", " "),
+ "amount": 0,
+ })
+
+ loadStats(mode, starterWidgetStatType)
+ }
+
+ }, 1500)
+ }, [])
+
// Apply month override (e.g. onboarding Explore Now) - consolidated with main load effect
useEffect(() => {
if (monthOverride instanceof Date) {
@@ -287,8 +418,9 @@ function computeTodayValueForOrg(key, orgStats) {
setSeries([]);
return;
}
- load(mode);
- }, [mode, globalUrl, days, selectedMonth, dummyMode, selectedOrgForStats, loadingSelectedOrgStats]);
+
+ loadStats(mode);
+ }, [selectedStatType, mode, globalUrl, days, selectedMonth, dummyMode, selectedOrgForStats, loadingSelectedOrgStats]);
// Notify parent on loading changes
useEffect(() => {
@@ -341,55 +473,125 @@ function computeTodayValueForOrg(key, orgStats) {
}
/>;
+
+ const barColorscheme = [
+ "#f85a3e", // anchor orange
+ "#ff7a57", // brighter, more playful
+ "#e14b2e", // slightly darker + redder
+ "#ff9b6b", // soft peachy highlight
+ "#c83f24", // deep burnt orange
+ ]
return (
}
-
-
OpenID connect
@@ -514,6 +653,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
onChange={(e) => setShowOpenIdCred(e.target.checked)}
name="showOpenIdCred"
color="primary"
+ disabled={!isAdmin}
/>
- Runs over time ({mode === "workflows" ? "Workflows" : "Apps"})
+ {selectedStatType?.label} ({selectedStatType?.amount})
- v && setMode(v)}
- sx={{
- height: 37,
- backgroundColor: 'rgba(255,255,255,0.06)',
- border: '1px solid rgba(255,255,255,0.22)',
- borderRadius: '30px',
- padding: '2px',
- "& .MuiToggleButton-root": {
- border: "none",
- borderRadius: "30px",
- color: "#fff",
- padding: "6px 16px",
- textTransform: "none",
- fontSize: "14px",
- "&.Mui-selected": {
- backgroundColor: "#fff",
- color: "#222",
- fontWeight: "600",
- "&:hover": {
- backgroundColor: "#fff",
- },
- },
- "&:hover": {
- backgroundColor: "rgba(255, 255, 255, 0.2)",
- },
+
+
+
+
+
+
+
+
+
-
-
- Workflows
-
-
-
-
- Apps
-
-
-
+ '& .MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.22)' },
+ }}>
+ option.id === value.id}
+ getOptionLabel={(option) => {
+ if (
+ option === undefined ||
+ option === null ||
+ option.label === undefined ||
+ option.label === null
+ ) {
+ if (option.value !== undefined && option.value !== null) {
+ return option.value
+ } else {
+ return option
+ }
+ }
+
+ const newname = (
+ option.label.charAt(0).toUpperCase() + option.label.substring(1)
+ ).replaceAll("_", " ");
+ return newname;
+ }}
+ options={statTypeOptions}
+ fullWidth
+ style={{
+ backgroundColor: theme.palette?.inputColor,
+ borderRadius: theme.palette?.borderRadius,
+ }}
+ onChange={(event, newValue) => {
+ console.log("CHANGE: ", newValue)
+ }}
+ renderOption={(props, data, state) => {
+ // Format to thousand or million
+ const formattedamount = formatCompactNumber(data?.amount)
+ const numbercolor = data?.amount >= 1000000 ? red : (data?.amount >= 100000 ? yellow : green)
+
+ return (
+
+ )
+ }}
+ renderInput={(params) => {
+ return (
+ {
}
const imageSize = 30
const timenowUnix = Math.floor(Date.now() / 1000)
- const columns: GridColDef[] = [
+ const columns = [
{
field: 'execution_source',
headerName: 'Source',
diff --git a/frontend/src/components/SearchData.jsx b/frontend/src/components/SearchData.jsx
index a77560dd..01f619bf 100644
--- a/frontend/src/components/SearchData.jsx
+++ b/frontend/src/components/SearchData.jsx
@@ -77,7 +77,7 @@ const SearchData = props => {
// return null
//}
- const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
// if (window.location.pathname === "/docs" || window.location.pathname === "/apps" || window.location.pathname === "/usecases" ) {
// setModalOpen(false)
// }
diff --git a/frontend/src/components/UsecaseSearch.jsx b/frontend/src/components/UsecaseSearch.jsx
index 2460876d..ff90bc68 100644
--- a/frontend/src/components/UsecaseSearch.jsx
+++ b/frontend/src/components/UsecaseSearch.jsx
@@ -349,7 +349,7 @@ const UsecaseSearch = (props) => {
const [selectedAction, setSelectedAction] = React.useState({});
const [firstRequest, setFirstRequest] = React.useState(true);
- const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
//const alert = useAlert()
useEffect(() => {
diff --git a/frontend/src/components/UserManagmentTab.jsx b/frontend/src/components/UserManagmentTab.jsx
index 6293b3ce..41ab96f0 100644
--- a/frontend/src/components/UserManagmentTab.jsx
+++ b/frontend/src/components/UserManagmentTab.jsx
@@ -25,6 +25,7 @@ import {
Skeleton,
Switch,
Box,
+ Chip,
} from "@mui/material";
import {
@@ -158,7 +159,7 @@ const UserManagmentTab = memo((props) => {
toast("Failed to update user");
} else {
//toast("Set the user field " + field + " to " + value);
- toast("Successfully updated user field " + field);
+ toast.success(`Successfully updated user field '${field}'`)
if (field !== "suborgs") {
setSelectedUserModalOpen(false);
@@ -203,7 +204,7 @@ const UserManagmentTab = memo((props) => {
getUsers();
}, 1000);
- toast("Invite sent! They will show up in the list when they have accepted the invite.")
+ toast.success("The user will show up in the list when finished.")
}
})
)
@@ -260,7 +261,6 @@ const UserManagmentTab = memo((props) => {
event.target.value = []
}
- console.log("event: ", event.target.value);
setMatchingOrganizations(event.target.value);
// Workaround for empty orgs
if (event.target.value.length === 0) {
@@ -336,6 +336,17 @@ const UserManagmentTab = memo((props) => {
})
.then((responseJson) => {
setUsers(responseJson);
+
+ if (responseJson.success !== false) {
+ for (var i = 0; i < responseJson.length; i++) {
+ const data = responseJson[i];
+ if (data?.login_type === "DELETED") {
+ //toast.info("Found lost/half-deleted users you can recover. Please contact support@shuffler.io to learn more.")
+ break
+ }
+ }
+ }
+
setShowLoader(false)
})
.catch((error) => {
@@ -364,13 +375,13 @@ const UserManagmentTab = memo((props) => {
})
.then((responseJson) => {
if (!responseJson.success && responseJson.reason !== undefined) {
- toast("Failed to deactivate user: " + responseJson.reason);
+ toast.error("Failed to deactivate user: " + responseJson.reason);
} else if (responseJson.success === false) {
- toast(
+ toast.error(
`Failed to deactivate user. Please contact ${supportEmail} if this persists.`,
);
} else {
- toast("Changed activation for user " + data.id);
+ toast.success("Changed activation for user " + data.id);
}
})
@@ -1529,6 +1540,7 @@ const UserManagmentTab = memo((props) => {
{
data.login_type === undefined ||
data?.login_type === null ||
data?.login_type?.length === 0
- ? "Normal"
+ ?
+ "Normal"
+ :
+ data?.login_type === "DELETED" ?
+ {
+ e.preventDefault()
+ e.stopPropagation()
+
+ toast.warn("Re-adding the account to the org with 'user' role.")
+ inviteUser({
+ "Username": data.username,
+ })
+ }}
+ />
: data.login_type
}
style={{ display:'table-cell',verticalAlign: 'middle', padding: "8px", }}
@@ -1647,6 +1682,7 @@ const UserManagmentTab = memo((props) => {
) : null}
{
setSelectedUserModalOpen(true);
setSelectedUser(data);
diff --git a/frontend/src/components/WelcomeForm2.jsx b/frontend/src/components/WelcomeForm2.jsx
index 3e11cfc2..41d45210 100644
--- a/frontend/src/components/WelcomeForm2.jsx
+++ b/frontend/src/components/WelcomeForm2.jsx
@@ -161,7 +161,7 @@ const WelcomeForm = (props) => {
const [clickdiff, setclickdiff] = useState(0);
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
- const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
//const alert = useAlert();
let navigate = useNavigate();
diff --git a/frontend/src/components/WorkflowGrid.jsx b/frontend/src/components/WorkflowGrid.jsx
index 6d3a61b8..751bf465 100644
--- a/frontend/src/components/WorkflowGrid.jsx
+++ b/frontend/src/components/WorkflowGrid.jsx
@@ -29,7 +29,7 @@ const searchClient = algoliasearch("JNSS5CFDZZ", "c8f882473ff42d41158430be09ec2b
const AppGrid = props => {
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, alternativeView, onlyResults, inputsearch } = props
- const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
//const [apps, setApps] = React.useState([]);
diff --git a/frontend/src/components/WorkflowTemplatePopup.jsx b/frontend/src/components/WorkflowTemplatePopup.jsx
index 3f02f706..de9f08dc 100644
--- a/frontend/src/components/WorkflowTemplatePopup.jsx
+++ b/frontend/src/components/WorkflowTemplatePopup.jsx
@@ -47,7 +47,7 @@ const WorkflowTemplatePopup = (props) => {
const [requestSent, setRequestSent] = React.useState(false)
- const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
let navigate = useNavigate();
useEffect(() => {
if (modalOpen !== true) {
diff --git a/frontend/src/components/ssoTab.jsx b/frontend/src/components/ssoTab.jsx
index d9339ef2..c361e1b1 100644
--- a/frontend/src/components/ssoTab.jsx
+++ b/frontend/src/components/ssoTab.jsx
@@ -15,6 +15,7 @@ import theme from "../theme.jsx";
import { toast } from "react-toastify";
import { Context } from "../context/ContextApi.jsx";
import { getTheme } from "../theme.jsx";
+import { red } from "../views/AngularWorkflow.jsx"
const useStyles = makeStyles({
notchedOutline: {
@@ -25,6 +26,14 @@ const useStyles = makeStyles({
const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handleEditOrg})=>{
+ // Check if user is admin
+ const isAdmin = userdata?.active_org?.role === "admin" || userdata?.support === true;
+
+ // State for tracking user SSO connection status
+ const [users, setUsers] = React.useState([]);
+ const [userSSOConnected, setUserSSOConnected] = React.useState(false);
+ const [checkingSSOStatus, setCheckingSSOStatus] = React.useState(true);
+
const classes = useStyles();
const [show2faSetup, setShow2faSetup] = React.useState(false);
const [autoPrivision, setAutoProvision] = React.useState(selectedOrganization?.sso_config?.auto_provision)
@@ -97,6 +106,53 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
const { themeMode, supportEmail, brandColor } = useContext(Context);
const theme = getTheme(themeMode, brandColor);
+ // Function to fetch users and check current user's SSO status
+ const checkUserSSOStatus = () => {
+ setCheckingSSOStatus(true);
+ fetch(globalUrl + "/api/v1/getusers", {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ credentials: "include",
+ })
+ .then((response) => {
+ if (response.status !== 200) {
+ return;
+ }
+ return response.json();
+ })
+ .then((responseJson) => {
+ if (responseJson && Array.isArray(responseJson)) {
+ setUsers(responseJson);
+
+ // Find current user and check if they have SSO info for this org
+ const currentUser = responseJson.find(user => user.id === userdata?.id);
+ if (currentUser && currentUser.sso_infos && Array.isArray(currentUser.sso_infos)) {
+ const hasSSOForThisOrg = currentUser.sso_infos.some(ssoInfo =>
+ ssoInfo.org_id === selectedOrganization?.id && ssoInfo.sub
+ );
+ setUserSSOConnected(hasSSOForThisOrg);
+ } else {
+ setUserSSOConnected(false);
+ }
+ }
+ setCheckingSSOStatus(false);
+ })
+ .catch((error) => {
+ console.log("Error fetching users:", error);
+ setCheckingSSOStatus(false);
+ });
+ };
+
+ // Check SSO status on component mount and when organization changes
+ useEffect(() => {
+ if (userdata?.id && selectedOrganization?.id) {
+ checkUserSSOStatus();
+ }
+ }, [userdata?.id, selectedOrganization?.id]);
+
useEffect(()=>{
if (openidClientSecret !== selectedOrganization?.sso_config?.client_secret) {
@@ -149,7 +205,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
disabled={
userdata === undefined ||
userdata === null ||
- userdata.admin !== "true"
+ !isAdmin
}
onClick={() =>
handleEditOrg(
@@ -256,7 +312,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
const url = `${globalUrl}/api/v1/orgs/${selectedOrganization?.id}/change`;
const data = {
org_id: selectedOrganization?.id,
- sso_test: true,
+ sso: true,
};
fetch(url, {
@@ -309,6 +365,59 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
});
};
+ const HandleDisconnectSSO = () => {
+ const url = `${globalUrl}/api/v1/disconnect_sso`;
+ const data = {
+ org_id: selectedOrganization?.id,
+ };
+
+ fetch(url, {
+ mode: "cors",
+ credentials: "include",
+ crossDomain: true,
+ method: "POST",
+ body: JSON.stringify(data),
+ withCredentials: true,
+ headers: {
+ "Content-Type": "application/json; charset=utf-8",
+ },
+ })
+ .then((response) => {
+ if (response.status !== 200) {
+ toast.error(
+ `Failed to disconnect SSO. Please try again later or contact ${supportEmail} if issue persists.`,
+ { duration: 3000 }
+ );
+ return null;
+ }
+ return response.json();
+ })
+ .then((responseJson) => {
+ if (!responseJson) return;
+
+ if (responseJson.success === true) {
+ toast.success(
+ "Successfully disconnected from SSO.",
+ { duration: 3000 }
+ );
+ // Refresh the SSO status after disconnecting
+ checkUserSSOStatus();
+ } else {
+ toast.error(
+ responseJson.reason || "Failed to disconnect SSO.",
+ { duration: 3000 }
+ );
+ }
+ })
+ .catch((error) => {
+ console.error("Error disconnecting SSO:", error);
+ toast.error(
+ "An error occurred while disconnecting SSO. Please try again.",
+ { duration: 3000 }
+ );
+ });
+ };
+
return (
@@ -428,58 +613,12 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
sx={{marginBottom: 0.6, marginTop: 0.6}}
name="onOffSwitch"
color="primary"
+ disabled={!isAdmin}
title="Disable auto-provisioning of users in SSO"
/>
+
+ )
+ }}
+ />
+
+
@@ -316,6 +425,81 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
SSO Configuration
+
+ {/* SSO Connection section - moved to top */}
+
@@ -399,6 +583,7 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
sx={{marginBottom: 0.6, marginTop: 0.6}}
name="onOffSwitch"
color="primary"
+ disabled={!isAdmin}
title="Disable auto-provisioning of users in SSO"
/>
+
+ {checkingSSOStatus
+ ? "Checking your SSO connection status..."
+ : userSSOConnected
+ ? "Your account is connected with this org's SSO!"
+ : "Connect your account with this org's SSO!"
+ }
+
+ 0 ||
+ ssoCertificate?.length > 0 ||
+ openidAuthorization?.length > 0 ||
+ openidClientId?.length > 0
+ )
+ ? "SSO must be configured for this organization before you can connect."
+ : ""
+ }
+ >
+
+
+
{SSORequired ? "Required" : "Optional"}
@@ -369,7 +554,6 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
sx={{marginBottom: 0.6, marginTop: 0.6}}
name="onOffSwitch"
color="primary"
- title="Disable auto-provisioning of users in SSO"
/>
+
+
+
+
+ {userSSOConnected && (
+
+
+
+
+
+ )}
+
+
-
- You can test your SSO configuration by clicking the button below.
- Before testing, ensure you have set Open ID Connect or SAML SSO
- credentials.
-
- 0 ||
- ssoCertificate?.length > 0 ||
- openidAuthorization?.length > 0 ||
- openidClientId?.length > 0
- )
- ? "Please ensure all SSO credentials are set before testing."
- : ""
- }
- >
-
-
-
-
-
{
paddingTop: defaultTopPadding,
paddingBottom: defaultTopPadding,
}}>
- {item.label}
+ {itemLabel}
- {
item?.type === "decision" ?
@@ -976,13 +1087,17 @@ const AgentUI = (props) => {
: null}
@@ -1078,6 +1193,7 @@ const AgentUI = (props) => {
}
var finishDecisionId = ""
+ var finishAnswer = ""
var sortedTimelineItems = []
for (var key in agent_data?.decisions) {
const item = agent_data.decisions[key]
@@ -1105,17 +1221,71 @@ const AgentUI = (props) => {
if (item?.details?.action === "finish" || item.action === "finish" || item.category == "finish" || item?.details?.action == "finalise") {
finishDecisionId = item?.run_details?.id
- }
+ finishAnswer = item?.reason || ""
+ if (item?.fields !== undefined && item?.fields !== null) {
+ // Just choosing the first one
+ for (var fieldKey in item?.fields) {
+ const field = item?.fields[fieldKey]
+ finishAnswer = field?.value || finishAnswer
+ break
+ }
+ }
+ }
}
- timelineItems.sort((a, b) => {
- if (a.start_time < b.start_time) {
- return 1;
+ // Fill blank space between items in timeline by adding "empty" decisions:
+ // 1. Sort
+ // 2. Fill blank space
+ // 3. Sort again
+ timelineItems.sort((a, b) => a.start_time - b.start_time)
+ for (var i = 0; i < timelineItems.length - 1; i++) {
+ if (timelineItems?.length <= 2) {
+ break
}
- return 0;
- })
+ if (i === timelineItems.length - 1) {
+ break
+ }
+
+ const currentItem = timelineItems[i]
+ if (currentItem?.type === "processing") {
+ continue
+ }
+
+ const nextItem = timelineItems[i + 1]
+ if (nextItem?.type === "processing") {
+ continue
+ }
+
+ if (nextItem.start_time - currentItem.end_time > 1) {
+ timelineItems?.push({
+ label: "",
+ type: "processing",
+ category: "processing",
+ status: "FINISHED",
+ start_time: currentItem.end_time,
+ end_time: nextItem.start_time,
+ })
+ }
+ }
+ timelineItems.sort((a, b) => a.start_time - b.start_time)
+
+ const handleKeyDownCont = (e) => {
+ if (finishDecisionId === "") {
+ return
+ }
+
+ const isCmdEnter = e.metaKey && e.key === "Enter"; // macOS
+ const isCtrlEnter = e.ctrlKey && e.key === "Enter"; // Windows/Linux
+ if (isCmdEnter || isCtrlEnter) {
+ e.preventDefault()
+
+ submitQuestions(finishDecisionId, {
+ "continue": continuationText,
+ }, true)
+ }
+ }
return (
{rerunButton}
-
+
{
:
rerunButton
}
-
-
-
- {open ?
-
-
-
+ {item?.type === "processing" ? null :
+
+
+
+ {open ?
+
+
+
+ }
@@ -1151,6 +1321,7 @@ const AgentUI = (props) => {
{
e.preventDefault();
@@ -1161,15 +1332,35 @@ const AgentUI = (props) => {
}, true)
}}
>
-
+ {finishAnswer !== "" ?
+
{
console.log("Value: ", e.target.value)
//setActionInput(e.target.value)
@@ -1195,7 +1386,7 @@ const AgentUI = (props) => {
}}
/>
- Any failed tasks will be set to ignored (TBD). Learn more
+ Any failed tasks will be set to ignored. Learn more
@@ -1242,7 +1433,7 @@ const AgentUI = (props) => {
// 1. Run the execution. Can this be a single-action run?
// 2. Get the execution ID and node ID from the response.
const uuid = uuidv4()
- var parsedAction = "list_tickets,API" // Default action for now
+ var parsedAction = "API" // Default action for now
if (chosenApps.length > 0) {
parsedAction = ""
for (var appKey in chosenApps) {
@@ -1319,155 +1510,253 @@ const AgentUI = (props) => {
cursor: "pointer",
}
+
+ const typeButtonGroup =
+
+
+
+
+
+
return (
-
+
+ {finishAnswer}
+
+
+ : null}
+
+
- {
- e.preventDefault();
- submitInput(actionInput);
- }}
- >
- 
-
-
-
-
- Shuffle AI Agents
-
+
-
-
-
-
+ {
return collapseField(jsonField)
}}
@@ -14499,10 +14515,11 @@ const AngularWorkflow = (defaultprops) => {
}
return (
- {
setExecutionText(data)
- executeWorkflow(data, workflow.start, lastSaved);
+ //executeWorkflow(data, workflow.start, lastSaved);
setExecutionArgumentModalOpen(false)
}}
@@ -14759,6 +14776,7 @@ const AngularWorkflow = (defaultprops) => {
color: theme.palette.textColor,
backgroundColor: 'inherit',
zIndex: 10000,
+ fontSize: 12,
}}
>
PS: Conditions can't be used for loops [ .# ]. Use the filters list action.{" "}
@@ -15110,7 +15128,9 @@ const AngularWorkflow = (defaultprops) => {
key={condition.condition.id}
square
style={paperVariableStyle}
- onClick={() => { }}
+ onClick={() => {
+ setLastSaved(false)
+ }}
>
+
+
+
{
- setActionInput(e.target.value)
- }}
- InputProps={{
- endAdornment: (
- agentRequestLoading ?
-
-
-
-
- ),
- }}
+ id="copy_element_shuffle"
+ style={{ display: "none" }}
/>
-
)
}
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index d6e33cef..fcf3e270 100755
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -463,9 +463,9 @@ const AngularWorkflow = (defaultprops) => {
var to_be_copied = "";
const [firstrequest, setFirstrequest] = React.useState(true);
- const cystyle = useMemo(() => defaultCytoscapeStyle(theme), [themeMode]);
- // const cystyle = useMemo(() => defaultCytoscapeStyle, [themeMode]);
+ const [apps, setApps] = React.useState([]);
+ const cystyle = useMemo(() => defaultCytoscapeStyle(theme, apps), [themeMode, apps]);
const [cy, setCy] = React.useState();
const useStyles = makeStyles({
@@ -593,7 +593,6 @@ const AngularWorkflow = (defaultprops) => {
const [showDropdown, setShowDropdown] = React.useState(false);
const [triggerActionList, setTriggerActionList] = React.useState([]);
- const [apps, setApps] = React.useState([]);
const [filteredApps, setFilteredApps] = React.useState([]);
const [prioritizedApps, setPrioritizedApps] = React.useState([])
@@ -2560,7 +2559,7 @@ const AngularWorkflow = (defaultprops) => {
// Center and zoom to the node with smooth animation if requested
if (config.center) {
- cy.animate({
+ cy.stop().animate({
center: {
eles: cyNode
},
@@ -3324,7 +3323,7 @@ const AngularWorkflow = (defaultprops) => {
}
const animationDuration = 150
- foundnode.animate(
+ foundnode.stop().animate(
{
style: parsedStyle,
},
@@ -3445,6 +3444,18 @@ const AngularWorkflow = (defaultprops) => {
return
}
+ for (var i = 0; i < workflowExecutions.length; i++) {
+ const exec = workflowExecutions[i]
+ if (exec.execution_id === curAction.source_execution) {
+ if (exec?.execution_argument === undefined || exec?.execution_argument === null || exec?.execution_argument.length === 0) {
+ break
+ }
+
+ setExecutionText(exec.execution_argument)
+ break
+ }
+ }
+
setExecutionRunning(true)
setExecutionRequestStarted(true)
var headers = {
@@ -3830,7 +3841,7 @@ const AngularWorkflow = (defaultprops) => {
} else {
console.log("Closing auth modal? FAIL")
- toast("Failed to find new authentication. See details in Oauth2 popup window where auth was attempted.");
+ toast.error("Failed to find new authentication. See details in Oauth2 popup window where auth was attempted.");
shouldClose = false
}
} else {
@@ -4184,7 +4195,7 @@ const AngularWorkflow = (defaultprops) => {
}
const animationDuration = 150
- node.animate(
+ node.stop().animate(
{
style: parsedStyle,
},
@@ -4201,7 +4212,7 @@ const AngularWorkflow = (defaultprops) => {
"border-color": "#81c784",
}
- node.animate(
+ node.stop().animate(
{
style: parsedStyle,
},
@@ -4250,7 +4261,7 @@ const AngularWorkflow = (defaultprops) => {
}
const animationDuration = 150
- node.animate(
+ node.stop().animate(
{
style: parsedStyle,
},
@@ -4267,7 +4278,7 @@ const AngularWorkflow = (defaultprops) => {
"border-color": "#81c784",
}
- node.animate(
+ node.stop().animate(
{
style: parsedStyle,
},
@@ -4298,7 +4309,7 @@ const AngularWorkflow = (defaultprops) => {
}
const animationDuration = 150
- node.animate(
+ node.stop().animate(
{
style: parsedStyle,
},
@@ -4314,7 +4325,7 @@ const AngularWorkflow = (defaultprops) => {
"line-gradient-stop-colors": ["grey", "grey"],
}
- node.animate(
+ node.stop().animate(
{
style: parsedStyle,
},
@@ -4346,7 +4357,7 @@ const AngularWorkflow = (defaultprops) => {
}
const animationDuration = 150
- node.animate(
+ node.stop().animate(
{
style: parsedStyle,
},
@@ -4363,7 +4374,7 @@ const AngularWorkflow = (defaultprops) => {
"border-color": color,
}
- node.animate(
+ node.stop().animate(
{
style: parsedStyle,
},
@@ -4394,7 +4405,7 @@ const AngularWorkflow = (defaultprops) => {
}
const animationDuration = 150
- node.animate(
+ node.stop().animate(
{
style: parsedStyle,
},
@@ -4450,7 +4461,7 @@ const AngularWorkflow = (defaultprops) => {
}
const animationDuration = 150
- node.animate(
+ node.stop().animate(
{
style: parsedStyle,
},
@@ -4484,7 +4495,7 @@ const AngularWorkflow = (defaultprops) => {
}
const animationDuration = 150
- node.animate(
+ node.stop().animate(
{
style: parsedStyle,
},
@@ -8627,7 +8638,7 @@ const AngularWorkflow = (defaultprops) => {
};
}
- event.target.animate(
+ event.target.stop().animate(
{
style: parsedStyle,
},
@@ -9423,7 +9434,7 @@ const AngularWorkflow = (defaultprops) => {
}
if (event.target !== undefined && event.target !== null) {
- event.target.animate(
+ event.target.stop().animate(
{
style: parsedStyle,
},
@@ -9741,7 +9752,7 @@ const AngularWorkflow = (defaultprops) => {
}
const animationDuration = 150
- foundnode.animate(
+ foundnode.stop().animate(
{
style: parsedStyle,
},
@@ -9910,7 +9921,7 @@ const AngularWorkflow = (defaultprops) => {
}
const animationDuration = 150
- foundnode.animate(
+ foundnode.stop().animate(
{
style: parsedStyle,
},
@@ -12487,7 +12498,7 @@ const AngularWorkflow = (defaultprops) => {
//}
safeRefine(event.currentTarget.value)
}}
- limit={5}
+ limit={15}
/>
{/*isSearchStalled ? 'My search is stalled' : ''*/}
@@ -14360,8 +14371,7 @@ const AngularWorkflow = (defaultprops) => {
padding: 30,
pointerEvents: "auto",
color: theme.palette.text.primary,
- minWidth: isMobile ? "90%" : 650,
- border: theme.palette.defaultBorder,
+ minWidth: isMobile ? "90%" : 750,
borderRadius: theme.palette.borderRadius,
backgroundColor: "black",
@@ -14474,18 +14484,24 @@ const AngularWorkflow = (defaultprops) => {
- 
-
- return (
- {
- const newChosenApps = chosenApps.filter((a, i) => i !== index)
- setChosenApps(newChosenApps)
- }}
- />
- )
- })}
-
-
- :
-
- {
+ e.preventDefault();
+ submitInput(actionInput);
+ }}
+ >
+ {/*
+
+ */}
+
+
+
+
+ What do you want to do?
+
+ {
+ setActionInput(e.target.value)
+ }}
+ InputProps={{
+ endAdornment: (
+ agentRequestLoading ?
+
+
+
+
+ ),
}}
/>
- {
- setAppPickerAnchor(null)
- }}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'left',
- }}
- >
-
+
+
+ return (
+ {
+ const newChosenApps = chosenApps.filter((a, i) => i !== index)
+ setChosenApps(newChosenApps)
+ }}
+ />
+ )
+ })}
+
+
+
+ */}
+
+
+
+
+ {
+ setAppPickerAnchor(null)
+ }}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'left',
+ }}
+ >
+
+
+
+ {chosenApps.map((app, index) => {
+ const chosenName = (app?.name?.charAt(0).toUpperCase() + app?.name?.slice(1))?.replaceAll("_", " ").replaceAll("-", " ")
+ const chosenImagePath = app?.image
+ const chosenImage =
+ {execution === undefined || execution === null || execution?.execution_id === undefined || execution?.execution_id === null ? null : typeButtonGroup}
+
+
+ {/*
+
+ */}
+
+ :
+
+
-
- {chosenApps.map((app, index) => {
- const chosenName = (app?.name?.charAt(0).toUpperCase() + app?.name?.slice(1))?.replaceAll("_", " ").replaceAll("-", " ")
- const chosenImagePath = app?.image
- const chosenImage =
+
+
+ {buttonState === "timeline" ?
+
+ {typeButtonGroup}
+
+
+
+
+
+
+
+
+ {execution?.status === "EXECUTING" ?
+
+
+
+
+
+ : null}
+
+
+
+
+
+ {chosenApps?.map((app, index) => {
+ return(
+
+ {
+ window.open(`/apps/${app.id}`, '_blank', 'noopener,noreferrer');
+ }}
+ style={{
+ cursor: "pointer",
+ width: 30,
+ height: 30,
+ }}
+ />
+
+ )
+ })}
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- {buttonState === "timeline" ?
-
- }
+ {
return
}
+ setLastSaved(false)
setSourceValue({
name: "source",
value: "",
@@ -15384,17 +15405,15 @@ const AngularWorkflow = (defaultprops) => {
// Change Direction of the branch target/source
const foundBranch = cy.getElementById(selectedEdge.id)
if (foundBranch !== undefined && foundBranch !== null) {
- console.log("BRANCH: ", foundBranch)
const source = foundBranch.data("source")
const target = foundBranch.data("target")
var branchdata = JSON.parse(JSON.stringify(foundBranch.data()))
- console.log("BEFORE: ", branchdata)
- console.log("Start node", workflow.start)
const startNode = workflow.start
if (source === startNode) {
toast("Can't point to Start Node")
} else {
+ setLastSaved(false)
const newid = uuidv4()
branchdata.source = target
branchdata.target = source
@@ -19298,7 +19317,7 @@ const AngularWorkflow = (defaultprops) => {
}, 2000);
}
- toast.info("Successfully changed active organisation - refreshing!");
+ toast.success("Successfully changed active organisation - refreshing!");
} else {
if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason.length > 0) {
toast(responseJson.reason);
@@ -20649,7 +20668,7 @@ const AngularWorkflow = (defaultprops) => {
}
const buttonHeights = 45
- const boxSize = buttonHeights
+ const boxSize = buttonHeights+2
const executionButton = executionRunning ? (
@@ -20737,20 +20756,17 @@ const AngularWorkflow = (defaultprops) => {
>
{
return (
-
+
{
onSelect={(select) => {
HandleJsonCopy(validate.result, select, "exec");
}}
- name={false}
+ name={"$exec"}
/>
)
@@ -21787,7 +21803,26 @@ const AngularWorkflow = (defaultprops) => {
)
}
- if (execution.execution_source === "authgroups") {
+ if (execution.execution_source?.startsWith("datastore")) {
+ const iconMargin = 7
+ return (
+
-
- {executionData.execution_source === "authgroups" || (executionData.authgroup !== undefined && executionData.authgroup !== null && executionData.authgroup.length > 0) ?
+ {executionData?.execution_source?.startsWith("datastore") ?
+ 2 ? "&category="+executionData.execution_source.split("|")[1]+"&key="+executionData.execution_source.split("|")[2] : ""}`}
+ target="_blank"
+ style={{ textDecoration: "none", color: theme.palette.linkColor }}
+ >
+ Datastore Automation
+
+ :
+ executionData.execution_source === "authgroups" || (executionData.authgroup !== undefined && executionData.authgroup !== null && executionData.authgroup.length > 0) ?
{
HandleJsonCopy(showResult, select, data.action.label);
console.log("SELECTED!: ", select);
}}
- name={"Results for " + data.action.label}
+ name={`$${data?.action?.label?.toLowerCase()}`}
/>
diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx
index d6317b3a..7a954ef2 100755
--- a/frontend/src/views/AppCreator.jsx
+++ b/frontend/src/views/AppCreator.jsx
@@ -563,7 +563,7 @@ const AppCreator = (defaultprops) => {
};
- const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
useEffect(() => {
if (window.location.pathname.includes("apps/edit")) {
diff --git a/frontend/src/views/AppExplorer.jsx b/frontend/src/views/AppExplorer.jsx
index 1e23d70d..54537f7d 100644
--- a/frontend/src/views/AppExplorer.jsx
+++ b/frontend/src/views/AppExplorer.jsx
@@ -247,7 +247,7 @@ const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)";
read_time: 1,
})
- const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
// FIXME: This is used, as useEffect() creates an issue with apps not loading at all
diff --git a/frontend/src/views/Docs.jsx b/frontend/src/views/Docs.jsx
index f5b3bb82..ef933d16 100755
--- a/frontend/src/views/Docs.jsx
+++ b/frontend/src/views/Docs.jsx
@@ -62,7 +62,6 @@ const dividerColor = "rgb(225, 228, 232)";
const hrefStyle = {
color: "rgba(255, 255, 255, 0.8)",
textDecoration: "none",
- marginRight: window.location.pathname.includes("/articles/") ? "0.8em" : undefined,
};
@@ -387,6 +386,7 @@ export const CodeHandler = (props) => {
minWidth: "50%",
maxWidth: "100%",
backgroundColor: theme.palette.inputColor,
+ whiteSpace: "pre-wrap",
overflowY: "auto",
// Have it inline
borderRadius: theme.palette?.borderRadius,
@@ -1020,7 +1020,7 @@ const Docs = (defaultprops) => {
}
const fetchDocList = (resetCache = false) => {
- var url = `${globalUrl}/api/v1/docs`
+ var url = `${globalUrl}/api/v1/docs?resetCache=${resetCache}`
if (location.pathname.includes("/legal")) {
url = `${globalUrl}/api/v1/docs?folder=legal&resetCache=${resetCache}`
} else if (location.pathname.includes("/articles")) {
@@ -1047,16 +1047,16 @@ const Docs = (defaultprops) => {
.catch((error) => { });
};
- const fetchDoc = (docId) => {
+ const fetchDoc = (docId, resetCache = false) => {
if (docId === undefined) {
return
}
- var url = `${globalUrl}/api/v1/docs/${docId}`
+ var url = `${globalUrl}/api/v1/docs/${docId}?resetCache=${resetCache}`
if (location.pathname.includes("/legal")) {
- url = `${globalUrl}/api/v1/docs/${docId}?folder=legal`
+ url = `${globalUrl}/api/v1/docs/${docId}?folder=legal&resetCache=${resetCache}`
} else if (location.pathname.includes("/articles")) {
- url = `${globalUrl}/api/v1/docs/${docId}?folder=articles`
+ url = `${globalUrl}/api/v1/docs/${docId}?folder=articles&resetCache=${resetCache}`
}
fetch(url, {
@@ -1082,7 +1082,7 @@ const Docs = (defaultprops) => {
autoClose: 2000,
});
setTimeout(() => {
- navigate(`/articles/2.0_release`)
+ navigate(`/articles`)
}, 2000)
return
}
@@ -1130,7 +1130,8 @@ const Docs = (defaultprops) => {
const handleResetCache = () => {
fetchDocList(true);
- toast("Cache has been reset");
+ fetchDoc(props.match.params.key, true);
+ toast("Cache and list will be reset in a few seconds");
}
if (firstrequest) {
@@ -1344,6 +1345,21 @@ const Docs = (defaultprops) => {
tr: TableRowRenderer,
th: TableHeaderCellRenderer,
td: TableCellRenderer,
+ ul: ({ children }) => (
+
+ {children}
+
+ ),
+ ol: ({ children }) => (
+
+ {children}
+
+ ),
+ li: ({ children }) => (
+
+ {children}
+
+ ),
}
@@ -1355,7 +1371,6 @@ const Docs = (defaultprops) => {
const activeListItemStyle = {
backgroundColor: "rgba(248, 106, 62, 0.08)", // Slight orange tint
- marginRight: window.location.pathname.includes("/articles/") ? "0.8em" : undefined,
borderLeft: "3px solid #f86a3e",
paddingLeft: "13px", // Compensate for the border
};
@@ -1415,6 +1430,7 @@ const Docs = (defaultprops) => {
+
+ )
+ } else if (execution.execution_source === "authgroups") {
const iconMargin = 7
return (
{
) : null}
+
{executionData.execution_source !== undefined &&
executionData.execution_source !== null &&
executionData.execution_source.length > 0 &&
@@ -22954,8 +22990,17 @@ const AngularWorkflow = (defaultprops) => {
- {
}
- {userdata?.support && isArticlePage && (
-
+
+
)}
{tocLines.length > 0 ?
(
diff --git a/frontend/src/views/NewDashboard.jsx b/frontend/src/views/NewDashboard.jsx
index bb2add48..f4709a84 100644
--- a/frontend/src/views/NewDashboard.jsx
+++ b/frontend/src/views/NewDashboard.jsx
@@ -111,8 +111,8 @@ const NewDashboard = (props) => {
const STATIC_TIME_PERCENT = 'TBD'
const STATIC_MONEY_PERCENT = 'TBD'
const kpis = [
- { value: timeFmt.display, title: timeFmt.title, label: 'Time saved', icon:
{`${getGreeting()}, ${displayName ?? 'User'}!`}
diff --git a/frontend/src/views/UpdateAuthentication.jsx b/frontend/src/views/UpdateAuthentication.jsx
index b55d844b..9f4702ea 100644
--- a/frontend/src/views/UpdateAuthentication.jsx
+++ b/frontend/src/views/UpdateAuthentication.jsx
@@ -25,7 +25,7 @@ const SetAuthentication = (props) => {
const [loadFail, setLoadFail] = useState("");
const [appAuthentication, setAppAuthentication] = React.useState([]);
- const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
//const alert = useAlert();
const parseIncomingOpenapiData = (data) => {
diff --git a/frontend/src/views/Welcome.jsx b/frontend/src/views/Welcome.jsx
index cb5c24c5..169c58b1 100644
--- a/frontend/src/views/Welcome.jsx
+++ b/frontend/src/views/Welcome.jsx
@@ -47,7 +47,7 @@ const Welcome = (props) => {
}
}, [activeStep])
- const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
const [steps, setSteps] = useState([
"Help us get to know you",
"Find your Apps",
diff --git a/frontend/src/views/Workflows2.jsx b/frontend/src/views/Workflows2.jsx
index f94b38b5..1cd1cfd3 100644
--- a/frontend/src/views/Workflows2.jsx
+++ b/frontend/src/views/Workflows2.jsx
@@ -343,7 +343,7 @@ export const GetIconInfo = (action) => {
"protect",
],
},
- { key: "intel", values: ["intel", "feed", "threat intel", "threat intelligence", "ti", "t.i.", "t.i", "ti.", "rule", "technique", "tactic", "techniques", "tactics", "ioc", "indicator", "hash", "ip", "url", "domain", ] },
+ { key: "intel", values: ["intel", "feed", "threat intel", "threat intelligence", "ti", "t.i.", "t.i", "ti.", "rule", "technique", "tactic", "techniques", "tactics", "ioc", "indicator", "hash", "ip", "url", "domain", "sha", "md5", ] },
];
var selectedKey = ""
@@ -3346,7 +3346,7 @@ const Workflows2 = (props) => {
}
style={{
textDecoration: "none",
- color: "inherit",
+ color: theme.palette.text.primary,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
@@ -5149,7 +5149,7 @@ const Workflows2 = (props) => {
{backgroundWorkflows.length > 0 &&
@@ -407,6 +408,7 @@ const NewDashboard = (props) => {