@@ -2386,8 +2424,8 @@ const Billing = memo((props) => {
We offer priority support through consultations and training to help you make the most of our product. If you have any questions, please reach out to us at {supportEmail}.
We offer priority support through consultations and training to help you make the most of our product. If you have any questions, please reach out to us at
-
- You have used {currentAppRunsInPercentage}% of total app execution limit or {userdata.app_execution_usage} app runs out of {userdata.app_execution_limit} app runs.
+ You have used {currentAppRunsInPercentage}% of total app execution limit or {Number(monthlyAppRunsParent ?? 0) + Number(monthlyAllSuborgExecutions ?? 0)} app runs out of {userdata.app_execution_limit} app runs this month.
-
+
+ {userdata?.active_org?.creator_org?.length > 0 ? null :
+ (
+ <>
+
+ Parent Organization App Executions: {monthlyAppRunsParent}
+
+
+ Sub-Organization App Executions: {monthlyAllSuborgExecutions || "N/A"}
+
+
+ )}
+
Set email alert thresholds for app runs
@@ -2442,8 +2492,8 @@ const Billing = memo((props) => {
: " " + 0 + " "}
app runs.
-
- Please note: Once your app runs reach the set alert threshold, all admins in the organization will receive an email notification.
+
+ Please note: Once your app runs reach the set alert threshold, all admins in the organization will receive an email notification. For Parent organizations, the alert will be sent base on the total app runs from both parent and sub-organizations. For Sub-organizations, the alert will be sent based on the app runs of the sub-organization only.
);
})
diff --git a/frontend/src/components/CollectIngestModal.jsx b/frontend/src/components/CollectIngestModal.jsx
index afba4afa..d00faffd 100644
--- a/frontend/src/components/CollectIngestModal.jsx
+++ b/frontend/src/components/CollectIngestModal.jsx
@@ -10,19 +10,27 @@ import {
DialogTitle,
DialogContent,
Typography,
+ IconButton,
Paper,
LinearProgress,
Grid,
Button,
+ Tooltip,
+ Autocomplete,
+ TextField,
} from '@mui/material';
import {
Rocket as RocketIcon,
FilterAlt as FilterAltIcon,
+ Add as AddIcon,
} from '@mui/icons-material';
+import algoliasearch from 'algoliasearch/lite';
+const searchClient = algoliasearch("JNSS5CFDZZ", "c8f882473ff42d41158430be09ec2b4e")
+
const CollectIngestModal = (props) => {
- const { globalUrl, open, setOpen } = props;
+ const { globalUrl, open, setOpen, workflows, getWorkflows, apps, } = props;
const { themeMode, brandColor } = useContext(Context);
const theme = getTheme(themeMode, brandColor);
@@ -37,12 +45,17 @@ const CollectIngestModal = (props) => {
return null
}
- const startIngestion = (appname, index) => {
- console.log("APPNAME:", appname, "INDEX:", index)
+ const startIngestion = (bundleName, appnames, category, index) => {
- const body = {
- "app_name": appname,
- "label": appname,
+ var body = {
+ "label": bundleName,
+ "app_name": appnames,
+
+ "category": "",
+ }
+
+ if (category !== undefined && category !== null) {
+ body.category = category
}
const url = `${globalUrl}/api/v2/workflows/generate`
@@ -61,21 +74,29 @@ const CollectIngestModal = (props) => {
return response.json();
})
.then((data) => {
+
+ if (getWorkflows !== undefined) {
+ getWorkflows()
+ }
+
console.log("Ingestion started successfully:", data);
- toast.success(`Ingestion for ${appname} started successfully!`);
+ toast.success(`Ingestion for ${bundleName} started successfully!`);
})
.catch((error) => {
console.error("Error starting ingestion:", error);
- toast.error(`Failed to start ingestion for ${appname}. Please try again.`);
+ toast.error(`Failed to start ingestion for ${bundleName}. Please try again or contact support@shuffler.io if this persists.`);
});
}
const IngestItem = (props) => {
- const { type, index } = props
+ const { type, appCategory, index, webhook } = props
const [hovering, setHovering] = useState(false);
- const [isFinished, setIsFinished] = useState(false);
+ const [selectedApps, setSelectedApps] = useState([]);
+
+ const [showAppsearch, setShowAppsearch] = useState(false);
+ const [algoliaOptions, setAlgoliaOptions] = useState([]);
const appname = type
const ingestedAmount = 20
@@ -85,49 +106,222 @@ const CollectIngestModal = (props) => {
"name": appname,
})
+ var foundMatchingWorkflow = null
+ if (workflows !== undefined && workflows !== null && workflows.length > 0) {
+ const parsedName = type.toLowerCase().replaceAll(" ", "_");
+ const foundWorkflow = workflows.find((workflow) => {
+ return workflow?.name?.toLowerCase().replaceAll(" ", "_") === parsedName
+ })
+
+ if (foundWorkflow !== undefined && foundWorkflow !== null) {
+ foundMatchingWorkflow = foundWorkflow
+
+
+ // Find relevant apps and maps them
+ if (apps.length > 0 && selectedApps.length === 0 && foundWorkflow?.actions !== undefined && foundWorkflow?.actions !== null && foundWorkflow?.actions.length > 0) {
+ var newSelectedApps = []
+ for (var actionkey in foundWorkflow.actions) {
+ const action = foundWorkflow.actions[actionkey]
+
+ if (action?.app_name !== "Singul" && action?.app_id !== "integration") {
+ continue
+ }
+
+ for (var paramkey in action.parameters) {
+ const param = action.parameters[paramkey]
+ if (!((param.name === "app_name" || param.name === "appName") && param.value !== undefined && param.value !== null && param.value.length > 0)) {
+ continue
+ }
+
+ // Find the app in available apps
+ const parsedname = param.value.replaceAll(" ", "_").toLowerCase()
+ for (var appkey in apps) {
+ const appname = apps[appkey].name.replaceAll(" ", "_").toLowerCase()
+ if (appname === parsedname) {
+ newSelectedApps.push(apps[appkey])
+ break
+ }
+ }
+
+ break
+ }
+ }
+
+ if (newSelectedApps.length > 0) {
+ setSelectedApps(newSelectedApps)
+ }
+ }
+
+ }
+ }
+
+ var matchingapps = []
+ if (appCategory !== undefined && appCategory !== null && appCategory.length > 0 && apps !== undefined && apps !== null && apps.length > 0) {
+ for (var appkey in apps) {
+ const app = apps[appkey]
+
+ for (var categorykey in app.categories) {
+ const category = app.categories[categorykey]
+ if (category.toLowerCase() === appCategory.toLowerCase()) {
+ matchingapps.push(app)
+ }
+ }
+ }
+ }
+
return (
// setHovering(true)}
+ onMouseEnter={() => {
+
+ //if (foundMatchingWorkflow !== null) {
+ //} else {
+ setHovering(true)
+ //}
+ }}
onMouseLeave={() => setHovering(false)}
>
-
diff --git a/frontend/src/components/EditWorkflow.jsx b/frontend/src/components/EditWorkflow.jsx
index dbd8d3ea..9e83cc34 100644
--- a/frontend/src/components/EditWorkflow.jsx
+++ b/frontend/src/components/EditWorkflow.jsx
@@ -3,6 +3,7 @@ import { getTheme } from '../theme.jsx';
import { isMobile } from "react-device-detect"
import { MuiChipsInput } from "mui-chips-input";
import { toast } from "react-toastify"
+import ReactGA from 'react-ga4';
import UsecaseSearch from "../components/UsecaseSearch.jsx"
import WorkflowGrid from "../components/WorkflowGrid.jsx"
import dayjs from 'dayjs';
@@ -63,6 +64,10 @@ import {
Add as AddIcon,
Remove as RemoveIcon,
EditNote as EditNoteIcon,
+ AutoAwesome as AutoAwesomeIcon,
+ CloudUpload as CloudUploadIcon,
+ CheckCircle as CheckCircleIcon,
+ Close as CloseIcon
} from "@mui/icons-material";
const EditWorkflow = (props) => {
@@ -72,6 +77,7 @@ const EditWorkflow = (props) => {
const {themeMode, brandColor} = useContext(Context)
const theme = getTheme(themeMode, brandColor)
const [submitLoading, setSubmitLoading] = React.useState(false);
+ const [aiGenerateLoading, setAiGenerateLoading] = React.useState(false);
const [showMoreClicked, setShowMoreClicked] = React.useState(isEditing !== false ? true : false);
const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)
@@ -92,6 +98,11 @@ const EditWorkflow = (props) => {
const [selectedCleanupActions, setSelectedCleanupActions] = React.useState(workflow?.form_control?.cleanup_actions !== undefined && workflow?.form_control?.cleanup_actions !== null ? JSON.parse(JSON.stringify(workflow?.form_control?.cleanup_actions)) : [])
const [formWidth, setFormWidth] = React.useState(boxWidth === undefined || boxWidth === null ? 500 : boxWidth)
+
+ // Flowchart upload states
+ const [uploadedImage, setUploadedImage] = React.useState(null)
+ const [imageBase64, setImageBase64] = React.useState("")
+ const [imageUploading, setImageUploading] = React.useState(false)
const classes = useStyles();
@@ -101,6 +112,59 @@ const EditWorkflow = (props) => {
}
}, [formWidth])
+ // Handle file upload and base64 conversion
+ const handleImageUpload = (file) => {
+ const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg']
+ if (!allowedTypes.includes(file.type)) {
+ toast.error("Please upload a PNG, JPG, or JPEG image")
+ return
+ }
+
+ const maxSize = 5 * 1024 * 1024 // 5MB in bytes
+ if (file.size > maxSize) {
+ toast.error("Image must be less than 5MB")
+ return
+ }
+
+ setImageUploading(true)
+
+ const reader = new FileReader()
+ reader.onload = (e) => {
+ const base64 = e.target.result
+ setImageBase64(base64)
+ setUploadedImage({
+ name: file.name,
+ size: file.size,
+ type: file.type
+ })
+ setImageUploading(false)
+
+ // Disable "Create from scratch" when image is uploaded
+ if (newWorkflow) {
+ setWorkflowAsCode(false)
+ }
+ }
+ reader.onerror = () => {
+ toast.error("Failed to read image file")
+ setImageUploading(false)
+ }
+ reader.readAsDataURL(file)
+ }
+
+ const removeUploadedImage = () => {
+ setUploadedImage(null)
+ setImageBase64("")
+ setImageUploading(false)
+ }
+
+ const formatFileSize = (bytes) => {
+ if (bytes === 0) return '0 Bytes'
+ const k = 1024
+ const sizes = ['Bytes', 'KB', 'MB', 'GB']
+ const i = Math.floor(Math.log(bytes) / Math.log(k))
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+ }
+
if (scrollTo !== undefined && scrollTo !== null && scrollTo.length > 0 && scrollDone === false) {
setTimeout(() => {
const foundScroll = document.getElementById(scrollTo)
@@ -220,7 +284,7 @@ const EditWorkflow = (props) => {
- {billingInfo.subscription !== undefined && billingInfo.subscription !== null ? (
+
@@ -2423,9 +2461,21 @@ const Billing = memo((props) => {
}}
/>
+ {/* {billingInfo.subscription !== undefined && billingInfo.subscription !== null ? (
isChildOrg ? null : (
{
selectedOrganization={selectedOrganization}
/>
)
- ) : null}
+ ) : null} */}
{alertThresholds.map((threshold, index) => (
@@ -2603,12 +2653,7 @@ const Billing = memo((props) => {
{
- setCurrentTab(-1)
-
- // Force re-render
- setTimeout(() => {
- setCurrentTab(newValue)
- }, 100);
+ setCurrentTab(newValue)
}}
style={{ marginTop: 20 }}
TabIndicatorProps={{
@@ -2620,52 +2665,66 @@ const Billing = memo((props) => {
}
}}
>
-
+
- {currentTab === 0 ?
-
+ {params.row.app_runs_hard_limit}
+
+ {
+ setOpen(true)
+ setEditingOrgId(params.row.orgId)
+ setEditing("app_executions_hard_limit")
+ if (params.row.app_runs_hard_limit === "N/A") {
+ setLimit("")
+ } else {
+ setLimit(params.row.app_runs_hard_limit)
+ }
+ }}
+ >
+
+
+ )
+ }
+ }
]
setSubOrgStatsColumns(columns)
@@ -2913,7 +3012,7 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
return
}
- if (selectedOrganization.sync_features.app_executions.limit <= 10000) {
+ if (selectedOrganization.sync_features.app_executions.limit <= 10000 && editing === "app_executions") {
toast.error("Insufficient app execution limit to increase child org limit")
return
}
@@ -2939,7 +3038,10 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
const org = subOrgs[orgIndex]
- org.sync_features[editing].limit = limit
+ if (editing !== "app_executions_hard_limit") {
+ org.sync_features[editing].limit = limit
+ }
+
org.sync_features.editing = true
const sync_features = org.sync_features
const data = {
@@ -2947,6 +3049,13 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
sync_features: sync_features,
}
+ if (editing === "app_executions_hard_limit") {
+ data.editing = "app_runs_hard_limit";
+ data.billing = {
+ app_runs_hard_limit: limit || 0
+ };
+ }
+
const url = `${globalUrl}/api/v1/orgs/${orgId}`;
fetch(url, {
method: "POST",
@@ -2974,6 +3083,12 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
newRows[orgIndex].workflow_usage_limit = limit;
return newRows;
});
+ }else if (editing === "app_executions_hard_limit") {
+ setSubOrgStatsRows((prevRows) => {
+ const newRows = [...prevRows];
+ newRows[orgIndex].app_runs_hard_limit = limit;
+ return newRows;
+ });
}
}
})
@@ -3087,10 +3202,21 @@ const IncreaseLimitPopUp = memo(({ open, onClose, limit, setLimit, HandleEditLim
}
}}
>
-
+ {editing === "app_executions_hard_limit" ? (
+
+ Add {editing.replaceAll("_", " ").replace(/\b\w/g, c => c.toUpperCase())}
+
+ ) : (
+
Increase {editing.replaceAll("_", " ").replace(/\b\w/g, c => c.toUpperCase())} Limit
+ )}
+ { editing === "app_executions_hard_limit" ? (
+
+ Please note that once you set a hard limit for app runs workflows will not be able to run if the limit is reached. You will be notified by email when you reach the limit.
+
+ ) : null}
setCurrentLimit(e.target.value)}
diff --git a/frontend/src/components/BillingStats.jsx b/frontend/src/components/BillingStats.jsx
index 5bb09ddb..8e011d42 100644
--- a/frontend/src/components/BillingStats.jsx
+++ b/frontend/src/components/BillingStats.jsx
@@ -31,57 +31,10 @@ import {
Box,
} from "@mui/material";
-import {
- BarChart,
- BarSeries,
- Bar,
- BarLabel,
-
- GridlineSeries,
- Gridline,
- TooltipArea,
- ChartTooltip,
- TooltipTemplate,
-} from 'reaviz';
-
import { typecost, typecost_single, } from "../views/HandlePaymentNew.jsx";
+import LineChartWrapper from '../components/LineChartWrapper.jsx';
import { Context } from '../context/ContextApi.jsx';
-const LineChartWrapper = ({keys, inputname, height, width}) => {
- const [hovered, setHovered] = useState("");
- const inputdata = keys.data === undefined ? keys : keys.data
- const {themeMode} = useContext(Context)
- const theme = getTheme(themeMode)
-
-
- return (
-
}
- {childOrgsAppRuns === undefined ?
+ {childOrgsAppRuns === undefined || currentTab === 1 ?
null
:
- {
+ setSelectedRows(newSelection);
+ }}
onRowSelectionModelChange={(newSelection) => {
- setSelectedRows(newSelection)
+ setSelectedRows(newSelection);
}}
keepNonExistentRowsSelected={false}
- getRowId={(row) => row.key}
+ getRowId={(row) => `${row?.key}_${row?.category}`}
autoHeight={true}
sx={{
@@ -2245,6 +2504,11 @@ const CacheView = memo((props) => {
-
+ {
+ currentTab === 0 ?
+
+
{
setAllChildOrgs={setAllChildOrgs}
allChildOrgsStats={allChildOrgsStats}
setAllChildOrgsStats={setAllChildOrgsStats}
+ currentTab={currentTab}
/>
+ :
+
@@ -2706,6 +2776,7 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
const { themeMode, brandColor, supportEmail } = useContext(Context);
const theme = getTheme(themeMode, brandColor);
+
// Handle page change
const handleChangePage = (event, newPage) => {
setPage(newPage);
@@ -2830,6 +2901,7 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
usage: stat?.monthly_app_executions || "N/A",
workflows_usage: stat?.total_workflow_executions || "N/A",
workflow_usage_limit: subOrg?.sync_features?.workflow_executions?.limit || "N/A",
+ app_runs_hard_limit: subOrg?.Billing?.app_runs_hard_limit || 0,
}
})
@@ -2890,6 +2962,33 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
)}
},
+ {
+ field: "app_runs_hard_limit", headerName: "App Executions Hard Limit", width: 200, renderCell: (params) => {
+ console.log("params.row: ", params.row)
+ return (
+ <>
+
-
- {inputname}
-
-
-
- )
-}
-
const AppStats = (defaultprops) => {
const {
@@ -92,6 +45,12 @@ const AppStats = (defaultprops) => {
inputWorkflows,
clickedFromOrgTab,
syncStats,
+ statistics,
+ monthlyAppRunsParent,
+ setMonthlyAppRunsParent,
+ monthlyAllSuborgExecutions,
+ setMonthlyAllSuborgExecutions,
+ currentTab
} = defaultprops;
const [keys, setKeys] = useState([])
@@ -104,7 +63,6 @@ const AppStats = (defaultprops) => {
const [endTime, setEndTime] = useState("")
const [startTime, setStartTime] = useState("")
- const [statistics, setStatistics] = useState(undefined);
const [filteredStatistics, setFilteredStatistics] = useState(undefined);
const [apprunCost, setApprunCost] = useState(0)
@@ -125,6 +83,11 @@ const AppStats = (defaultprops) => {
}
}, [])
+ useEffect(() => {
+ if (statistics && statistics?.org_id?.length > 0) {
+ handleDataSetting(statistics, "day")
+ }
+}, [statistics])
const getWorkflowStats = async (workflow, startTime, endTime) => {
@@ -266,6 +229,7 @@ const AppStats = (defaultprops) => {
const statKey = syncStats === true ? "onprem_stats" : "daily_statistics"
if (statistics[statKey] === undefined || statistics[statKey] === null) {
setFilteredStatistics(statistics)
+ setMonthlyAppRunsParent(statistics["monthly_app_executions"] ?? 0)
return
}
@@ -312,20 +276,27 @@ const AppStats = (defaultprops) => {
}
}
- // Make a date at the 1st of the current month
+ // Make a date at the 1st of the current month - only when no start time is selected
var foundstarttime = (new Date())
- foundstarttime.setDate(1)
if (startTime !== "" && startTime !== undefined && startTime !== null) {
- foundstarttime = startTime
+ foundstarttime = new Date(startTime)
+ // Set to start of day to include the entire start date
+ foundstarttime.setHours(0, 0, 0, 0)
+ } else {
+ // Default to 1st of current month when no start time is selected
+ foundstarttime.setDate(1)
+ foundstarttime.setHours(0, 0, 0, 0)
}
- // Set to tomorrow by default
+ // Set end time properly
var foundendtime = (new Date())
- foundendtime.setDate(foundendtime.getDate() + 1)
-
- // Check if endtime is after the daily statistics["date"] string
if (endTime !== "" && endTime !== undefined && endTime !== null) {
- foundendtime = endTime
+ foundendtime = new Date(endTime)
+ // Set to end of day to include the entire end date
+ foundendtime.setHours(23, 59, 59, 999)
+ } else {
+ // Default to current date when no end time is selected
+ foundendtime.setHours(23, 59, 59, 999)
}
// Check if start time is before the daily statistics["date"] string
@@ -337,8 +308,20 @@ const AppStats = (defaultprops) => {
}
const date = new Date(item["date"])
- if (date >= foundstarttime) {
- if (date <= foundendtime) {
+ // Normalize the date to start of day for comparison
+ const normalizedDate = new Date(date)
+ normalizedDate.setHours(0, 0, 0, 0)
+
+ // Normalize foundstarttime for comparison
+ const normalizedStartTime = new Date(foundstarttime)
+ normalizedStartTime.setHours(0, 0, 0, 0)
+
+ // Normalize foundendtime for comparison
+ const normalizedEndTime = new Date(foundendtime)
+ normalizedEndTime.setHours(0, 0, 0, 0)
+
+ if (normalizedDate >= normalizedStartTime) {
+ if (normalizedDate <= normalizedEndTime) {
newlist.push(item)
}
}
@@ -373,6 +356,10 @@ const AppStats = (defaultprops) => {
workflowexecutions += item["workflow_executions"]
appexecutions += item["app_executions"]
+ if (currentTab === 0) {
+ appexecutions += (item["child_app_executions"] ?? 0)
+ }
+
estimatedcost += (item["app_executions"] * invocationCost)
}
@@ -390,7 +377,16 @@ const AppStats = (defaultprops) => {
}
setFilteredStatistics(tmpstats)
- handleDataSetting(tmpstats, "day")
+ handleDataSetting(tmpstats, "day")
+ // if we have done monthly reset than only show monthly app runs as current month app run
+ const currentMonth = new Date().getMonth() + 1
+ if (!monthlyAppRunsParent && statistics["monthly_app_executions"] > 0 && currentMonth === statistics["last_monthly_reset_month"]) {
+ setMonthlyAppRunsParent(statistics["monthly_app_executions"])
+ }
+
+ if (!monthlyAllSuborgExecutions && statistics["monthly_child_app_executions"]> 0 && currentMonth === statistics["last_monthly_reset_month"]) {
+ setMonthlyAllSuborgExecutions(statistics["monthly_child_app_executions"])
+ }
if (workflows !== undefined && workflows !== null && workflows.length > 0) {
@@ -476,7 +472,7 @@ const AppStats = (defaultprops) => {
if (item["child_app_executions"] !== undefined && item["child_app_executions"] !== null) {
childorgappRuns["data"].push({
key: new Date(item["date"]),
- data: inputdata["child_app_executions"]
+ data: item["child_app_executions"]
})
}
@@ -496,40 +492,45 @@ const AppStats = (defaultprops) => {
}
}
- // Adds data for today
- if (inputdata["daily_app_executions"] !== undefined && inputdata["daily_app_executions"] !== null) {
- appRuns["data"].push({
- key: new Date(),
- data: inputdata["daily_app_executions"]
- })
+ // Only add today's data if endTime is not set or if today falls within the selected date range
+ const today = new Date()
+ const shouldAddTodayData = endTime === "" || endTime === undefined || endTime === null ||
+ (new Date(endTime) >= today.setHours(0, 0, 0, 0))
- appcostRuns["data"].push({
- key: new Date(),
- data: (inputdata["daily_app_executions"] * invocationCost).toFixed(2)
- })
- }
+ if (shouldAddTodayData) {
+ // Adds data for today
+ if (inputdata["daily_app_executions"] !== undefined && inputdata["daily_app_executions"] !== null) {
+ appRuns["data"].push({
+ key: new Date(),
+ data: inputdata["daily_app_executions"]
+ })
- if (inputdata["daily_child_app_executions"] !== undefined && inputdata["daily_app_executions"] !== null) {
- childorgappRuns["data"].push({
- key: new Date(),
- data: inputdata["daily_child_app_executions"]
- })
+ appcostRuns["data"].push({
+ key: new Date(),
+ data: (inputdata["daily_app_executions"] * invocationCost).toFixed(2)
+ })
+ }
- //setApprunCosts(appcostRuns)
- }
+ if (inputdata["daily_child_app_executions"] !== undefined && inputdata["daily_app_executions"] !== null) {
+ childorgappRuns["data"].push({
+ key: new Date(),
+ data: inputdata["daily_child_app_executions"]
+ })
+ }
- if (inputdata["daily_workflow_executions"] !== undefined && inputdata["daily_workflow_executions"] !== null) {
- workflowRuns["data"].push({
- key: new Date(),
- data: inputdata["daily_workflow_executions"]
- })
- }
+ if (inputdata["daily_workflow_executions"] !== undefined && inputdata["daily_workflow_executions"] !== null) {
+ workflowRuns["data"].push({
+ key: new Date(),
+ data: inputdata["daily_workflow_executions"]
+ })
+ }
- if (inputdata["daily_subflow_executions"] !== undefined && inputdata["daily_subflow_executions"] !== null) {
- subflowRuns["data"].push({
- key: new Date(),
- data: inputdata["daily_subflow_executions"]
- })
+ if (inputdata["daily_subflow_executions"] !== undefined && inputdata["daily_subflow_executions"] !== null) {
+ subflowRuns["data"].push({
+ key: new Date(),
+ data: inputdata["daily_subflow_executions"]
+ })
+ }
}
// Only for parent orgs
@@ -541,49 +542,8 @@ const AppStats = (defaultprops) => {
setWorkflowRuns(workflowRuns)
setAppruns(appRuns)
setApprunCosts(appcostRuns)
- }
-
- const getStats = (orgid) => {
-
- if (orgid === undefined || orgid === null) {
- return
- }
-
- fetch(`${globalUrl}/api/v1/orgs/${orgid}/stats`, {
- method: "GET",
- headers: {
- "Content-Type": "application/json",
- Accept: "application/json",
- },
- credentials: "include",
- })
- .then((response) => {
- if (response.status !== 200) {
- console.log("Status not 200 for workflows :O!: ", response.status);
- return;
- }
-
- return response.json();
- })
- .then((responseJson) => {
- if (responseJson["success"] === false) {
- return
- }
-
- setStatistics(responseJson)
- handleDataSetting(responseJson, "day")
- })
- .catch((error) => {
- console.log("error: ", error)
- });
}
- useEffect(() => {
- if(selectedOrganization?.id?.length > 0) {
- getStats(selectedOrganization.id)
- }
- }, [selectedOrganization])
-
const paperStyle = {
textAlign: "center",
padding: "40px",
@@ -703,15 +663,19 @@ const AppStats = (defaultprops) => {
]
const data = (
-
+
All shown statistics are gathered from Your Organisation Statistics.
- It exists to give you more insight into your workflows, and to understand your utilization of the Shuffle platform. The billing tracker is in Beta, and is always calculated manually before being invoiced.
+ {currentTab === 0 ?
+
+ All Organization app runs are calculated base on addition of parent org app runs + all child org app runs.
+ : It exists to give you more insight into your workflows, and to
+ understand your utilization of the Shuffle platform.{" "}}
{syncStats !== true ? null : "PS: You are currently looking at data from your onprem synced org"} @@ -722,7 +686,7 @@ const AppStats = (defaultprops) => { {filteredStatistics !== undefined ?
-
-
- {clickedFromOrgTab? (
-
-
{appRuns === undefined ?
null
:
- {syncStats !== true ? null : "PS: You are currently looking at data from your onprem synced org"} @@ -722,7 +686,7 @@ const AppStats = (defaultprops) => { {filteredStatistics !== undefined ?
- {syncStats == true ? null :
+ {/* {syncStats == true ? null :
The cost of app runs in the selected period based on {filteredStatistics.monthly_app_executions} App Runs. These numbers do not exclude your included 10.000/month or {includedExecutions} App Runs per month. App Run cost: ${invocationCost}.
@@ -742,7 +706,7 @@ const AppStats = (defaultprops) => {
- }
+ } */}
{syncStats === true ? null :
{
}
- {syncStats === true ? null :
+ {syncStats === true || currentTab === 0 ? null :
Workflow runs in the selected period
@@ -778,7 +742,7 @@ const AppStats = (defaultprops) => {
}
- {syncStats === true ? null :
+ {/* {syncStats === true ? null :
Estimated cost to be billed at the end of the current month. Subtracted contractually included app runs. Actual cost month to date: ${monthToDateCost}. App Run cost: ${invocationCost}.
@@ -793,15 +757,9 @@ const AppStats = (defaultprops) => {
- }
-
- : null}
-
+ } */}
+
+
- ):(
-
-
- )}
+ : null}
+
{
-
-
{resultLoading ?
{
{showOptions && (
updatedAutomation.options.map((option, optionIndex) => {
- if (option?.key === "workflow_id") {
+ if (option?.key === "datastore_categories") {
+ if (datastoreCategories === undefined || datastoreCategories === null || datastoreCategories.length <= 1) {
+ return (
+
+ No categories available. Please add categories in the settings.
+
+ )
+ }
+
+ return (
+ option?.value.includes(c)) || []}
+ classes={{ inputRoot: classes.inputRoot }}
+ ListboxProps={{
+ style: {
+ backgroundColor: theme.palette.surfaceColor,
+ color: theme.palette.text.primary,
+ borderRadius: theme.palette.borderRadius,
+ },
+ }}
+ onChange={(event, newValue) => {
+ console.log("New Value: ", newValue)
+
+ option.value = ""
+ for (var i = 0; i < newValue.length; i++) {
+ option.value += newValue[i] + ","
+ }
+
+ if (newValue.length > 0) {
+ updatedAutomation.enabled = true
+ } else {
+ updatedAutomation.enabled = false
+ }
+
+ updatedAutomation.options[optionIndex] = option
+ setUpdatedAutomation(updatedAutomation)
+ setUpdated(true)
+
+ setUpdate(Math.random()) // Force re-render
+ }}
+
+ getOptionLabel={(option) => {
+ if (option === undefined || option === null) {
+ return "No Categories Selected";
+ }
+
+ return option
+ }}
+ options={datastoreCategories}
+ fullWidth
+ style={{
+ backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+ borderRadius: theme.palette.textFieldStyle.borderRadius,
+ color: theme.palette.textFieldStyle.color,
+ height: 35,
+ marginBottom: 40,
+ }}
+ renderOption={(props, data, state) => {
+ const fixedname = data?.charAt(0)?.toUpperCase() + data?.slice(1)?.replaceAll("_", " ")
+ const iconDetails = GetIconInfo({
+ "app_name": fixedname,
+ "name": fixedname,
+ })
+
+ const keyfound = option?.value.includes(data)
+
+ return (
+
+ {data.image !== undefined && data.image !== null && data.image.length > 0 ?
+ 
+ : null}
+
+ Choose {data}
+
+
+ } >
+
+
+ )
+ }}
+ renderInput={(params) => {
+ return (
+ {
{...props}
style={{
backgroundColor: theme.palette.surfaceColor,
- color: data.id === option?.value ? "red" : theme.palette.text.primary,
- borderBottom: data.id === "parent" ? "2px solid rgba(255,255,255,0.5)" : null
+ color: data.id === option?.value ? red : theme.palette.text.primary,
}}
value={data}
>
@@ -1297,12 +1462,25 @@ const CacheView = memo((props) => {
sortable: true,
},
{
- width: 600,
+ width: 540,
field: 'value',
filterable: true,
headerName: 'Value',
renderCell: (props) => {
const data = props.row
+
+ if (data?.category?.toLowerCase() === "protected") {
+ return (
+
+ ***************
+
+ )
+ }
+
const validate = validateJson(data.value)
return (
@@ -1321,22 +1499,17 @@ const CacheView = memo((props) => {
backgroundColor: theme.palette.platformColor,
border: theme.palette.defaultBorder,
padding: 5,
- minWidth: 600,
- maxHeight: 600,
+ minWidth: 500,
+ maxHeight: 500,
overflowY: "auto",
}}
collapsed={true}
enableClipboard={(copy) => {
- // handleReactJsonClipboard(copy);
+ handleReactJsonClipboard(copy)
}}
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
iconStyle={theme.palette.jsonIconStyle}
displayDataTypes={false}
- onSelect={(select) => {
-
- // HandleJsonCopy(showResult, select, data.action.label);
- console.log("SELECTED!: ", select);
- }}
name={null}
/>
:
@@ -1348,6 +1521,74 @@ const CacheView = memo((props) => {
)
}
},
+ {
+ field: 'category',
+ headerName: 'Category',
+ description: 'Category for this key.',
+ width: 75,
+ filterable: false,
+ sortable: true,
+ renderCell: (props) => {
+ // Return avatar with hover for the category
+ const data = props.row
+ const clickCategory = (e) => {
+ setCategoryConfig(undefined)
+ setCategoryAutomations(defaultAutomation)
+
+ if (selectAllChecked || selectedFiles.length > 0) {
+ setUpdateToThisCategory(data.category)
+ return
+ }
+
+ setSelectedCategory(data.category)
+ if (data.category === "all" || data.category === "default") {
+ listOrgCache(orgId, "", 0, pageSize, page)
+ } else {
+ listOrgCache(orgId, data.category, 0, pageSize, page)
+ }
+
+ // Add it to the url as a query
+ if (window.location.search.includes("category=")) {
+ const newurl = window.location.href.replace(/category=[^&]+/, `category=${data.category}`)
+ window.history.pushState({ path: newurl }, "", newurl)
+ } else {
+ window.history.pushState({ path: window.location.href }, "", `${window.location.href}&category=${data.category}`)
+ }
+ }
+
+
+ const iconDetails = GetIconInfo({
+ "app_name": data.category,
+ "name": data.category,
+ })
+
+ const avatarLetter = (data.category === "" || data.category === "default" ? " " : data.category.charAt(0).toUpperCase())[0]
+ return (
+
+ {
+ clickCategory(e)
+ }}
+ style={{
+ color: "white",
+ backgroundColor: iconDetails?.iconBackgroundColor || theme.palette.primary.secondary,
+ marginLeft: 15,
+ height: 30,
+ width: 30,
+ cursor: data.category !== "" && data.category !== "default" ? "pointer" : "default",
+ }}
+ variant="rounded"
+ >
+ {iconDetails?.originalIcon ?
+ iconDetails?.originalIcon
+ :
+ avatarLetter
+ }
+
+
+ )
+ }
+ },
{
field: 'actions',
headerName: 'Actions',
@@ -1361,7 +1602,7 @@ const CacheView = memo((props) => {
return (
- {data?.workflow_id === "" || data?.workflow_id === null || data?.workflow_id === undefined ?
+ {data?.workflow_id === "" || data?.workflow_id === null || data?.workflow_id === undefined || data?.workflow_id?.length !== 36 ?
{
{
title={"Go to workflow"}
style={{}}
aria-label={"Download"}
+ placement="left"
>
{
>
{
{
+ onClick={(e) => {
+ e.preventDefault()
+ e.stopPropagation()
// Try to make the value JSON indented
const valid = validateJson(data.value)
var newvalue = data.value
@@ -1469,7 +1713,9 @@ const CacheView = memo((props) => {
{
+ onClick={(e) => {
+ e.preventDefault()
+ e.stopPropagation()
window.open(`${globalUrl}/api/v1/orgs/${orgId}/cache/${data.key}?type=text&authorization=${data.public_authorization}`, "_blank");
}}
>
@@ -1486,7 +1732,9 @@ const CacheView = memo((props) => {
{
+ onClick={(e) => {
+ e.preventDefault()
+ e.stopPropagation()
deleteEntry(orgId, data.key, data.category)
}}
>
@@ -1609,6 +1857,8 @@ const CacheView = memo((props) => {
workflows={workflows}
getWorkflows={getWorkflows}
+
+ apps={apps}
/>
{cacheDistributionModal}
@@ -1658,6 +1908,13 @@ const CacheView = memo((props) => {
>
Learn more
+
+ {selectedCategory === "protected" ?
+
@@ -2067,15 +2324,17 @@ const CacheView = memo((props) => {
@@ -1047,7 +974,7 @@ const AppStats = (defaultprops) => {
)
const dataWrapper = (
-
+
{data}
+ {data}
);
return dataWrapper;
diff --git a/frontend/src/components/CacheView.jsx b/frontend/src/components/CacheView.jsx
index 1e94d131..b4aac34b 100644
--- a/frontend/src/components/CacheView.jsx
+++ b/frontend/src/components/CacheView.jsx
@@ -4,7 +4,8 @@ import { getTheme } from "../theme.jsx";
import { toast } from 'react-toastify';
import ReactJson from "react-json-view-ssr";
-import { GetIconInfo } from "../views/Workflows2.jsx";
+import { GetIconInfo, } from "../views/Workflows2.jsx";
+import { validateJson, handleReactJsonClipboard, } from "../views/Workflows.jsx";
import { red } from "../views/AngularWorkflow.jsx";
import CollectIngestModal from "../components/CollectIngestModal.jsx";
import {
@@ -34,6 +35,7 @@ import {
InputLabel,
Pagination,
PaginationItem,
+ Avatar,
} from "@mui/material";
import {
@@ -76,8 +78,8 @@ import {
SmartToy as SmartToyIcon,
Settings as SettingsIcon,
FilterAlt as FilterAltIcon,
+ CompareArrows as CompareArrowsIcon,
} from "@mui/icons-material";
-import { validateJson, } from "../views/Workflows.jsx";
import { Context } from "../context/ContextApi.jsx";
const scrollStyle1 = {
@@ -130,21 +132,22 @@ const CacheView = memo((props) => {
})
const [_, setUpdate] = useState(Math.random())
const [selectedRows, setSelectedRows] = useState([]);
-
// Direct category migration from ../components/Files.jsx
const [selectAllChecked, setSelectAllChecked] = React.useState(false)
const [renderTextBox, setRenderTextBox] = React.useState(false);
- const [datastoreCategories, setDatastoreCategories] = React.useState(["default"]);
+ const [datastoreCategories, setDatastoreCategories] = React.useState(["default", "protected"]);
const [selectedCategory, setSelectedCategory] = React.useState("default");
const [selectedFileId, setSelectedFileId] = React.useState("");
const [updateToThisCategory, setUpdateToThisCategory] = useState("")
const [workflows, setWorkflows] = useState([]);
+ const [apps, setApps] = useState([]);
const [selectedFiles, setSelectedFiles] = useState([]);
const [showAutomationMenu, setShowAutomationMenu] = useState(false);
const [showSettingsMenu, setShowSettingsMenu] = useState(false);
const [showCollectIngestMenu, setShowCollectIngestMenu] = useState(false);
+ var to_be_copied = "";
const defaultAutomation = [
{
"name": "Run workflow",
@@ -156,6 +159,42 @@ const CacheView = memo((props) => {
"icon":
+ Protected keys are encrypted, only available to admins, and will be masked when used in workflows. This is a basic protection, and is NOT bulletproof.
+
+ : null}
+
- {iconDetails?.originalIcon && (
- iconDetails?.originalIcon
- )}
+
+
+
+
+
+ : null}
{hovering ?
: null}
- {isFinished ?
+ {foundMatchingWorkflow !== null ?
{
}}>
{ingestedAmount} / X
+
+ {/*
{
variant="determinate"
fullWidth value={{ingestedAmount}}
/>
+ */}
: null}
@@ -158,7 +355,7 @@ const CollectIngestModal = (props) => {
sx: {
borderRadius: theme?.palette?.DialogStyle?.borderRadius,
border: theme?.palette?.DialogStyle?.border,
- minWidth: 500,
+ minWidth: 850,
minHeight: 700,
fontFamily: theme?.typography?.fontFamily,
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
@@ -189,9 +386,10 @@ const CollectIngestModal = (props) => {
- {
- // if (elements && elements.length > 0) {
- // //toast("Click event")
- // console.log("Clicked: ", elements)
- // }
- // }}
- // />
- // )
+ return (
+
-
+
-
+ {foundMatchingWorkflow !== null ?
+
+
- {appname}
-
+ {
+ setSelectedApps(value)
+ }}
+
+ getOptionLabel={(option) => {
+ const parsedname = option.name.replaceAll("_", " ")
+
+ return (
+
+
+
+ {selectedApps.map((app, index) => {
+ // Show image of each one
+ return (
+
+ {
+ setShowAppsearch(!showAppsearch)
+ }}
+ >
+
+
+
+
+ {showAppsearch ?
+
+
+ 
+
+
+ )
+ })}
+
+
+ 
+
+ {parsedname}
+
+
+ )
+ }}
+ renderInput={(params) => {
+ return (
+
+ {iconDetails?.originalIcon && (
+ iconDetails?.originalIcon
+ )}
+
+
+
+ {appname}
+
+
-
+
{newWorkflow ? "New" : "Editing"} Workflow
@@ -298,93 +362,371 @@ const EditWorkflow = (props) => {
paddingLeft: 30,
backgroundColor: themeMode === "dark" ? "#262626" : theme.palette.DialogStyle.backgroundColor,
}}>
-
+ )}
{usecases !== null && usecases !== undefined && usecases.length > 0 ?
@@ -505,6 +871,98 @@ const EditWorkflow = (props) => {
/>
+ {/* Flowchart Upload Section - Only for new workflows */}
+ {newWorkflow === true ? (
+
+ {!uploadedImage ? (
+
+ ) : null}
+
{showMoreClicked === true ?
{
+ const input = document.createElement('input')
+ input.type = 'file'
+ input.accept = 'image/png,image/jpeg,image/jpg'
+ input.onchange = (e) => {
+ if (e.target.files.length > 0) {
+ handleImageUpload(e.target.files[0])
+ }
+ }
+ input.click()
+ }}
+ >
+ {imageUploading ? (
+
+ ) : (
+
+
+ Processing image...
+
+
+ ) : (
+
+
+ Generate Workflow from Flowchart
+
+
+ Click to upload your flowchart - AI will convert it to a workflow
+
+
+ PNG, JPG, JPEG • Max 5MB
+
+
+ )}
+
+
+
+
+ )}
+
+
+
+
+ {uploadedImage.name}
+
+
+ {formatFileSize(uploadedImage.size)}
+
+
+ {
}}
/>
-
-
)
})
diff --git a/frontend/src/components/HealthBarChart.jsx b/frontend/src/components/HealthBarChart.jsx
index a4f05273..a5d1dec4 100644
--- a/frontend/src/components/HealthBarChart.jsx
+++ b/frontend/src/components/HealthBarChart.jsx
@@ -1,22 +1,93 @@
-import React from 'react';
-import { Bar } from 'react-chartjs-2';
+import React, { useState } from 'react';
const HealthBarChart = (props) => {
- const { globalUrl, filteredData, options, onBarClick } = props;
-
- return (
-
+
+
-
- -
-
- {[
-
- {
- setSelectAllChecked((prev) => !prev);
- setSelectedFiles((prev) => {
- if (prev.length === files.length) {
- return []
- } else {
- return files.map((_, index) => !prev.includes(index))
- }
- })
- if (selectAllChecked) {
- setSelectedFileId([])
- } else {
- setSelectedFileId(
- files
- .filter((file) => file.namespace === selectedCategory)
- .map((file) => file.id)
- );
- }
- }}
- />
- ,
- "Name",
- "Workflow",
- "Md5",
- "Status",
- "Filesize",
- "Actions",
- "Distribution"
- ]
- .filter(Boolean)
- .map((header, index) => (
-
- {Array(8)
- .fill()
- .map((_, colIndex) => (
-
-
- ))}
-
- )):
- files.length === 0 ? (
-
- {/*
-
- {handleFileCheckboxChange(index); setSelectedFileId(prev => {
- if (prev.includes(file.id)) {
- return prev.filter((item) => item !== file.id)
- } else {
- return [...prev, file.id]
- }
- })}}
- />
-
-
-
-
-
-
-
-
-
-
- )
- }
- style={{
- display: 'table-cell',
- overflow: "hidden",
- }}
- />
-
- {file.md5_sum}
-
- )}
- primaryTypographyProps={{
- style:{
- display: 'table-cell',
- marginLeft:isSelectedFiles? 15:null,
- overflow: "hidden",
- whiteSpace: 'nowrap',
- textOverflow: 'ellipsis',
- maxWidth: 200,
- }
- }}
- />
-
-
-
- {
- setOpenEditor(true)
- setOpenFileId(file.id)
- readFileData(file)
- }}
- >
-
-
-
-
- {/*
-
-
- {
- // Open the file, without downloading it
- window.open(`${globalUrl}/api/v1/files/${file.id}/content?type=text&authorization=${file.public_authorization}`, "_blank noreferrer noopener")
- }}
- >
-
-
-
- */}
-
-
- {
- downloadFile(file);
- }}
- >
-
+
-
- No files found
-
-
- ):(
- files?.map((file, index) => {
- if (file.namespace === "") {
- file.namespace = "default";
- }
-
- if (file.namespace !== selectedCategory) {
- return null;
- }
-
- var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
- if (index % 2 === 0) {
- bgColor = themeMode === "dark" ? "#1A1A1A" : "#EAEAEA";
- }
- const isDistributed = file?.suborg_distribution?.length > 0 ? true : false;
- const filenamesplit = file.filename.split(".")
- const iseditable = file.filesize < 2000000 && file.status === "active" && (allowedFileTypes.includes(filenamesplit[filenamesplit.length-1]) || !file?.filename.includes("."))
- return (
-
-
-
-
- {
- navigator.clipboard.writeText(file.id);
- document.execCommand("copy");
-
- toast(file.id + " copied to clipboard");
- }}
- >
-
-
-
-
-
- {
- deleteFile(file);
- }}
- >
-
-
-
-
-
+ display: "flex",
+ textAlign: "center",
+ }}>
+
+ {page * pageSize + 1} - {Math.min((page + 1) * pageSize, totalAmount)} of {totalAmount}
+
+
+ {
+
+ return (
+
+
+ {/* Chart Container */}
+
+ );
};
export default HealthBarChart;
diff --git a/frontend/src/components/HealthPage.jsx b/frontend/src/components/HealthPage.jsx
index fcadb776..660719e0 100644
--- a/frontend/src/components/HealthPage.jsx
+++ b/frontend/src/components/HealthPage.jsx
@@ -1,31 +1,35 @@
import React, { useEffect, useState, useCallback } from 'react';
-import { Bar } from 'react-chartjs-2';
-//import healthData1 from '../healthstats1.json';
-import { toast } from "react-toastify"
-import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';
+import { toast } from "react-toastify";
+import {
+ CheckOutlined as CheckOutlinedIcon,
+} from '@mui/icons-material';
+
import {
Button,
ButtonGroup,
Typography,
+ LinearProgress,
} from "@mui/material";
+
import HealthBarChart from '../components/HealthBarChart.jsx';
+import LiveExecutionsChart from '../components/LiveExecutionsGraph.jsx';
const HealthPage = (props) => {
- const { globalUrl, userdata } = props;
+ const { userdata, globalUrl } = props;
const [healthData, setHealthData] = useState(null);
const [selectedRange, setSelectedRange] = useState('30d');
+ const [liveExecutionsData, setLiveExecutionsData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [averageUptime, setAverageUptime] = useState(0);
+ const [liveExecutionsRange, setLiveExecutionsRange] = useState('1h'); // Default to 1h
+ const [isHealthLoading, setIsHealthLoading] = useState(false); // Loading state for HealthBarChart
+ const [isLiveExecutionsLoading, setIsLiveExecutionsLoading] = useState(false); // Loading state for LiveExecutionsChart
- const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
- //const globalUrl = `https://shuffler.io`
-
- console.log("HEALTHPAGE 1")
+ const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
const fetchHealthStats = useCallback(async () => {
- //const after = new Date().getTime() - 90 * 24 * 60 * 60
+ setIsHealthLoading(true); // Start loading for HealthBarChart
try {
- //const response = await fetch(`${globalUrl}/api/v1/health/stats?after=${after}`, {
const response = await fetch(`${globalUrl}/api/v1/health/stats`, {
method: "GET",
headers: {
@@ -42,31 +46,118 @@ const HealthPage = (props) => {
} catch (error) {
console.error("Error fetching health stats:", error);
toast.error("Failed loading health stats");
+ } finally {
+ setIsHealthLoading(false); // Stop loading for HealthBarChart
+ }
+ }, [globalUrl]);
+
+ const fetchLiveExecutions = useCallback(async (range = '1h') => {
+ setIsLiveExecutionsLoading(true); // Start loading for LiveExecutionsChart
+ try {
+ const fetchOptions = {
+ method: "GET",
+ credentials: "include",
+ };
+
+ if (window.location.host !== "localhost:3002") {
+ fetchOptions.headers = {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ };
+ }
+
+ const now = Math.floor(Date.now() / 1000);
+ // let after = now - 3600; // Default to 1h
+ let mode = ""
+
+ switch (range) {
+ case '1h':
+ mode = "1h"
+ break;
+ case '7h':
+ mode = "7h"
+ break;
+ case '1d':
+ mode = "1d"
+ break;
+ case '7d':
+ mode = "7d"
+ break;
+ case 'month':
+ mode = "month"
+ break;
+ default:
+ mode = "1h"
+ }
+
+ if (!userdata.support_access) {
+ return
+ }
+
+ const response = await fetch(
+ `${globalUrl}/api/v1/health/executions/live?mode=${mode}`,
+ fetchOptions
+ );
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch live executions");
+ }
+
+ const data = await response.json();
+ console.log("Raw live executions data:", data);
+
+ if (Array.isArray(data)) {
+ const formattedData = data
+ .map(item => ({
+ ...item,
+ // failed: Number(item.failed) || 0,
+ executing: Number(item.executing) || 0,
+ finished: Number(item.finished) || 0,
+ aborted: Number(item.aborted) || 0,
+ created_at: Number(item.created_at) || 0
+ }))
+ .sort((a, b) => a.created_at - b.created_at);
+
+ console.log("Formatted live executions data:", formattedData);
+ setLiveExecutionsData(formattedData);
+ } else {
+ console.error("Received invalid data format:", data);
+ setLiveExecutionsData([]);
+ }
+ } catch (error) {
+ console.error("Error fetching live executions:", error);
+ toast.error("Failed loading live executions data");
+ } finally {
+ setIsLiveExecutionsLoading(false); // Stop loading for LiveExecutionsChart
}
}, [globalUrl]);
useEffect(() => {
fetchHealthStats();
- }, [fetchHealthStats]);
+ fetchLiveExecutions(liveExecutionsRange);
+
+ const interval = setInterval(() => fetchLiveExecutions(liveExecutionsRange), 60000);
+ return () => clearInterval(interval);
+ }, [fetchHealthStats, fetchLiveExecutions, liveExecutionsRange]);
const extractRunFinished = (data, range) => {
if (!data || !Array.isArray(data)) return [];
-
+
const currentDate = new Date().getTime();
const rangeInMillis = {
'24hr': 24 * 60 * 60 * 1000,
'7day': 7 * 24 * 60 * 60 * 1000,
'30d': 30 * 24 * 60 * 60 * 1000,
'90d': 90 * 24 * 60 * 60 * 1000
- }
- const filteredData = data.filter(item => currentDate - item.updated * 1000 <= rangeInMillis[range])
-
- const aggregatedData = new Map()
-
+ };
+ const filteredData = data.filter(item => currentDate - item.updated * 1000 <= rangeInMillis[range]);
+
+ const aggregatedData = new Map();
+
filteredData.forEach(item => {
const timestamp = item.updated * 1000; // Convert Unix timestamp to milliseconds
let key;
-
+
switch (range) {
case '24hr':
const date = new Date(timestamp);
@@ -83,7 +174,7 @@ const HealthPage = (props) => {
default:
key = new Date(timestamp).toLocaleDateString();
}
-
+
// Check if date already exists in the map
if (aggregatedData.has(key)) {
// Update aggregated values
@@ -100,13 +191,13 @@ const HealthPage = (props) => {
});
}
});
-
+
// Calculate averages and assign colors
const result = Array.from(aggregatedData.entries()).map(([key, { totalEntries, totalRunFinished, executionIds }]) => {
const avg = totalEntries > 0 ? totalRunFinished / totalEntries : 0;
const FinalAvg = avg * 100;
let color;
-
+
if (FinalAvg >= 100) {
color = '#00F670';
} else if (FinalAvg >= 98.50 && FinalAvg <= 99.99) {
@@ -114,7 +205,7 @@ const HealthPage = (props) => {
} else if (FinalAvg <= 98.49) {
color = '#FF354C';
}
-
+
return {
date: range === '24hr' ? `${key}:00` : key,
avgRunFinished: FinalAvg,
@@ -122,11 +213,10 @@ const HealthPage = (props) => {
executionIds
};
});
-
+
return result;
};
-
-
+
useEffect(() => {
if (healthData) {
const newData = extractRunFinished(healthData, selectedRange);
@@ -160,19 +250,19 @@ const HealthPage = (props) => {
const labels = filteredData.map((value, i) => {
if (selectedRange === '24hr') {
const [datePart, hourPart] = value.date.split(' ');
- const [day, month, year] = datePart.split('/');
+ const [month, day, year] = datePart.split('/');
const monthIndex = parseInt(month, 10) - 1;
const date = new Date(year, monthIndex, day);
let formattedDate = `${date.toLocaleString('en-US', { month: 'short', day: '2-digit' })}`;
-
// Add hour part if available
if (hourPart) {
formattedDate += `, ${hourPart.split(':').slice(0, 2).join(':')}`;
}
+
return `${formattedDate} \nUptime: ${value.avgRunFinished.toFixed(2)}%`;
} else if (selectedRange === '7day') {
const [datePart, hourPart] = value.date.split(' ');
- const [day, month, year] = datePart.split('/');
+ const [month, day, year] = datePart.split('/');
const monthIndex = parseInt(month, 10) - 1;
const date = new Date(year, monthIndex, day);
let formattedDate = `${date.toLocaleString('en-US', { month: 'short', day: '2-digit' })}`;
@@ -185,12 +275,12 @@ const HealthPage = (props) => {
}
else {
const dateParts = value.date.split('/'); // Assuming the date format is "DD/MM/YYYY"
- const date = new Date(`${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`); // Reformat the date string to "YYYY-MM-DD"
+ const date = new Date(`${dateParts[2]}-${dateParts[0]}-${dateParts[1]}`); // Reformat the date string to "YYYY-MM-DD"
+
return `${date.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' })} \nUptime: ${value.avgRunFinished.toFixed(2)}%`;
}
});
-
if (selectedRange === '24hr') {
barThickness = 35;
}
@@ -200,12 +290,6 @@ const HealthPage = (props) => {
else if (selectedRange === '30d') {
barThickness = 25;
}
- // let width = 800; // Default chart width
- // if (selectedRange === '7day') {
- // width = 400; // Adjust chart width for 7 days
- // } else if (selectedRange === '30d') {
- // width = 600; // Adjust chart width for 30 days
- // }
const datasets = [{
label: "",
@@ -213,14 +297,11 @@ const HealthPage = (props) => {
backgroundColor: filteredData.map(item => item.color),
borderWidth: 1,
barThickness: barThickness,
- // barPercentage: barPercentage,
}];
return { labels, datasets };
};
- console.log("HEALTHPAGE 2")
-
const options = {
legend: {
display: false
@@ -253,12 +334,11 @@ const HealthPage = (props) => {
},
afterLabel: function (tooltipItem, data) {
const label = data.labels[tooltipItem.index];
- // console.log(label)
const uptime = label.match(/Uptime:\s*(\d+(?:\.\d+)?)/)[1]; // Extract uptime value using regex
- return `Success Rate: ${uptime}%`; // Customize the uptime display
+ return `Test-Workflow Health: ${uptime}%`; // Customize the uptime display
},
title: function () {
- return 'Fully Oprational'; // Hide the tooltip title
+ return 'Fully Operational'; // Hide the tooltip title
}
}
}
@@ -284,32 +364,118 @@ const HealthPage = (props) => {
}
};
+ const healthBarData = updateChartData()
+
return (
-
+ {chartData.map((item, index) => (
+
- );
+ onMouseEnter={() => setHoveredBar(item)}
+ onMouseLeave={() => setHoveredBar(null)}
+ onClick={() => handleBarClick(item)}
+ />
+ ))}
+
+
+ {/* Tooltip */}
+ {hoveredBar && (
+
+
+ )}
+ Date: {hoveredBar.label}
+ Uptime: {hoveredBar.value}%
+ Executions: {hoveredBar.executionIds.length}
+
-
+
+ {/* Health Bar Chart Section */}
-
-
-
-
-
+
+
+
+
+
-
-
-
sudo chown -R 1000:1000 shuffle-database diff --git a/frontend/src/views/RunWorkflow.jsx b/frontend/src/views/RunWorkflow.jsx index a9a6cf5c..21cc9bb8 100644 --- a/frontend/src/views/RunWorkflow.jsx +++ b/frontend/src/views/RunWorkflow.jsx @@ -13,7 +13,7 @@ import { makeStyles } from '@mui/material/styles'; import { useInterval } from "react-powerhooks"; import { isMobile } from "react-device-detect"; import Markdown from "react-markdown"; -import theme from '../theme.jsx'; +import {getTheme} from '../theme.jsx'; import rehypeRaw from "rehype-raw"; import RecentWorkflow from "../components/RecentWorkflow.jsx"; @@ -58,6 +58,8 @@ const hrefStyle = { const RunWorkflow = (defaultprops) => { const { globalUrl, userdata, isLoaded, isLoggedIn, setIsLoggedIn, setCookie, register, serverside } = defaultprops; + const { themeMode, brandColor } = useContext(Context); + const theme = getTheme(themeMode, brandColor); const { supportEmail } = useContext(Context); let navigate = useNavigate(); diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx index 3fe551f4..32859549 100755 --- a/frontend/src/views/Workflows.jsx +++ b/frontend/src/views/Workflows.jsx @@ -558,7 +558,7 @@ export const handleReactJsonClipboard = (copy) => { document.execCommand("copy"); console.log("COPYING!"); - toast("Copied value to clipboard, NOT json path.") + toast.success("Copied Value, NOT json path.") } else { console.log("Failed to copy from " + elementName + ": ", copyText); } diff --git a/frontend/src/views/Workflows2.jsx b/frontend/src/views/Workflows2.jsx index d702f24f..86c28e18 100644 --- a/frontend/src/views/Workflows2.jsx +++ b/frontend/src/views/Workflows2.jsx @@ -17,11 +17,14 @@ import GetAppIcon from '@mui/icons-material/GetApp'; // Material UI & Components import { makeStyles } from "@mui/styles"; import { Navigate } from "react-router-dom"; +import { isMobile } from "react-device-detect" +import ReactGA from 'react-ga4'; + +import LineChartWrapper from "../components/LineChartWrapper.jsx"; import SecurityFramework from '../components/SecurityFramework.jsx'; import EditWorkflow from "../components/EditWorkflow.jsx" import Priority from "../components/Priority.jsx"; import { Context } from "../context/ContextApi.jsx"; -import { isMobile } from "react-device-detect" // Material UI Components import { @@ -99,6 +102,9 @@ import { Psychology as PsychologyIcon, Wifi as WifiIcon, Devices as DevicesIcon, + AutoAwesome as AutoAwesomeIcon, + BarChart as BarChartIcon, + Lock as LockIcon, } from "@mui/icons-material"; // Additional Components @@ -115,14 +121,26 @@ import { InstantSearch, Configure, connectHits, connectSearchBox, connectRefinem import { debounce } from "lodash"; import { removeQuery } from "../components/ScrollToTop.jsx"; -import {green, yellow, red, grey } from "../views/AngularWorkflow.jsx" +import {green, yellow, red, grey, triggers as wfTriggers, } from "../views/AngularWorkflow.jsx" const searchClient = algoliasearch("JNSS5CFDZZ", "c8f882473ff42d41158430be09ec2b4e"); const svgSize = 24; -const imagesize = 22; +const imagesize = 23; +// Session-based modal visibility helper +const AI_ANNOUNCEMENT_SESSION_KEY = "ai_announcement_session"; + +const getCookie = (name) => { + if (typeof document === "undefined") return ""; + const pattern = `; ${document.cookie}`; + const parts = pattern.split(`; ${name}=`); + if (parts.length === 2) { + return decodeURIComponent(parts.pop().split(";").shift() || ""); + } + return ""; +}; @@ -212,8 +230,14 @@ export const GetIconInfo = (action) => { "release", ], }, - - + { + key: "secret", + values: [ + "api", + "password", + "protect", + ], + } ]; var selectedKey = "" @@ -402,6 +426,12 @@ export const GetIconInfo = (action) => { iconBackgroundColor: "green", originalIcon:
- Workflow Health
- Operational
+ {/* Loading Bar for HealthBarChart */}
+ {isHealthLoading && (
+
+ {part}
+ {index < parts.length - 1 && (
+
+ {term}
+
+ )}
+
+ ))}
+
+ );
+ } catch {
+ return {stringValue};
+ }
+ }, [isPythonCode]);
+
+ if (value == null) {
+ return null;
+ }
+
+ try {
+ if (isJson(value)) {
+ const jsonValue = getJsonValue(value);
+
+ if (jsonValue === null) {
+ return {
- Version: 2.1.0-rc2
+ Version:
+ 2.1.0
+
diff --git a/frontend/src/components/LicencePopup.jsx b/frontend/src/components/LicencePopup.jsx
index 0267267d..70e4cc6e 100644
--- a/frontend/src/components/LicencePopup.jsx
+++ b/frontend/src/components/LicencePopup.jsx
@@ -418,6 +418,10 @@ const LicencePopup = (props) => {
showSupport = true
}
+ if (userdata?.app_execution_limit >= 300000) {
+ top_text = "Enterprise Plan"
+ }
+
if (subscription.name.includes("Open Source")) {
top_text = "Open Source"
showSupport = true
@@ -761,7 +765,7 @@ const LicencePopup = (props) => {
{
isCloud ?
userdata?.app_execution_limit && userdata?.app_execution_limit !== 10000 ?
- "You have already subscribed to the Scale plan, which includes " + (userdata?.app_execution_limit/1000) + "K app runs/month. You can increase the limit by upgrading current plan. Contact support@shuffler.io for more information." :
+ `You have already subscribed to the ${top_text}, which includes ${userdata?.app_execution_limit/1000}K app runs/month. You can increase the limit by upgrading current plan. Contact support@shuffler.io for more information.` :
`You are using free Starter plan with max ${userdata?.app_execution_limit === 10000 ? "10,000" : "2,000"} runs per month. Upgrade to increase this limit.`
:
diff --git a/frontend/src/components/LineChartWrapper.jsx b/frontend/src/components/LineChartWrapper.jsx
new file mode 100644
index 00000000..95aa8024
--- /dev/null
+++ b/frontend/src/components/LineChartWrapper.jsx
@@ -0,0 +1,107 @@
+import React, { useState, useEffect, useContext, memo, useMemo } from 'react'
+import {getTheme} from '../theme.jsx';
+import { Context } from '../context/ContextApi.jsx';
+
+import {
+ Typography,
+} from '@mui/material';
+
+import {
+ BarChart,
+ BarSeries,
+ Bar,
+ BarLabel,
+
+ GridlineSeries,
+ Gridline,
+ TooltipArea,
+ ChartTooltip,
+ TooltipTemplate,
+} from 'reaviz';
+
+const LineChartWrapper = (props) => {
+ const {keys, inputname, height, width, border} = props
+
+ const [hovered, setHovered] = useState("");
+ const {themeMode} = useContext(Context)
+ const theme = getTheme(themeMode)
+
+ var inputdata = keys.data === undefined ? keys : keys.data
+
+ var newname = inputname === undefined || inputname === null ? "" : inputname.trim().replaceAll("_", " ")
+ newname = newname.charAt(0).toUpperCase() + newname.slice(1)
+
+ if (inputdata?.key !== undefined && inputdata?.key !== null && inputdata?.key !== "" && inputdata?.datasets !== undefined && inputdata?.datasets !== null && inputdata?.datasets.length > 0 && inputdata?.labels !== undefined && inputdata?.labels !== null && inputdata?.labels.length > 0) {
+
+ var tmpdata = inputdata?.datasets[0]
+ if (tmpdata?.data !== undefined && tmpdata?.data !== null && tmpdata?.data.length > 0 && inputdata?.labels?.length === tmpdata?.data?.length) {
+ console.log("Fix it!")
+ var newarray = []
+ for (var key in tmpdata.data) {
+ var entry = {
+ "key": inputdata.labels[key] !== undefined ? inputdata.labels[key] : key,
+ "data": tmpdata.data[key],
+ }
+
+ newarray.push(entry)
+ }
+
+ inputdata = newarray
+ }
+
+ }
+
+ if (inputdata === undefined || inputdata === null) {
+ return (
+
+ Invalid linegraph data format
+
+ )
+ }
+
+ var defaultStyle = {
+ color: "white",
+ padding: 30,
+ marginTop: 15,
+ overflow: "hidden",
+
+ border: "1px solid rgba(255,255,255,0.3)",
+ borderRadius: theme.palette?.borderRadius,
+ backgroundColor: theme.palette.platformColor,
+ }
+
+ if (border === false) {
+ defaultStyle.border = "none"
+ defaultStyle.borderRadius = 0
+ defaultStyle.backgroundColor = "transparent"
+ }
+
+ return (
+
- Beta: Coming Soon
-
- )}
{
}
}}
>
- Become a partner
+ Become a Partner
@@ -1676,7 +1661,7 @@ const Navbar = (props) => {
const topbarHeight = showTopbar ? 40 : 0
const topbar = !isCloud || !showTopbar ? null :
- curpath === "/" || curpath.includes("/docs") || curpath === "/pricing" || curpath === "/contact" || curpath === "/search" || curpath === "/usecases" || curpath === "/training" || curpath === "/professional-services" ?
+ curpath === "/" || curpath.includes("/docs") || curpath === "/pricing" || curpath === "/contact" || curpath === "/search" || curpath === "/usecases" || curpath === "/training" || curpath === "/poc" || curpath === "/professional-services" ?
{/* uncommit this to show topbar for release */}
{/*
diff --git a/frontend/src/views/LoginPageOld.jsx b/frontend/src/views/LoginPageOld.jsx
index aaee73d6..c0996436 100755
--- a/frontend/src/views/LoginPageOld.jsx
+++ b/frontend/src/views/LoginPageOld.jsx
@@ -344,7 +344,7 @@ const LoginDialog = (props) => {
variant="body2"
style={{ marginBottom: 20, color: "white" }}
>
- 1. Make sure shuffle-database folder has correct access, and that you have a minimum of 2Gb of RAM available:{" "}
+ 1. Make sure shuffle-database folder has correct access, and that you have a minimum of 4Gb of RAM available:{" "}
+
);
};
diff --git a/frontend/src/components/HighlightedValueInSearch.jsx b/frontend/src/components/HighlightedValueInSearch.jsx
new file mode 100644
index 00000000..f707a6fc
--- /dev/null
+++ b/frontend/src/components/HighlightedValueInSearch.jsx
@@ -0,0 +1,257 @@
+import React, { useEffect, useRef, useCallback, useMemo } from 'react';
+import ReactJson from 'react-json-view-ssr';
+import CodeMirror from '@uiw/react-codemirror';
+import { python } from '@codemirror/lang-python';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode';
+
+const HighlightedValueInSearch = ({ value, searchTerm, theme }) => {
+ const containerRef = useRef(null);
+ const preRef = useRef(null);
+ const scrollTimeoutRef = useRef(null);
+
+ const isJson = useCallback((str) => {
+ if (typeof str === 'object' && str !== null) return true;
+ if (typeof str !== 'string') return false;
+
+ const trimmed = str.trim();
+ if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) return false;
+
+ try {
+ JSON.parse(trimmed);
+ return true;
+ } catch {
+ return false;
+ }
+ }, []);
+
+ const getJsonValue = useCallback((val) => {
+ try {
+ return typeof val === 'object' ? val : JSON.parse(val.trim());
+ } catch {
+ return null;
+ }
+ }, []);
+
+ const highlightInJson = useCallback((jsonStr, term) => {
+ if (!term) return jsonStr;
+
+ try {
+ const escapedTerm = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ const regex = new RegExp(`(${escapedTerm})`, 'gi');
+ const highlightId = `highlight-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+ return jsonStr.replace(regex, `$1`);
+ } catch {
+ return jsonStr;
+ }
+ }, []);
+
+ const isPythonCode = useCallback((str) => {
+ if (typeof str !== 'string') return false;
+
+ const pythonPatterns = [
+ 'import ', 'from ', 'def ', 'class ', 'if __name__',
+ 'print(', 'return ', 'elif ', 'except:', 'try:', 'with ',
+ 'lambda ', 'yield ', 'async def', 'await '
+ ];
+
+ const trimmed = str.trim();
+ return pythonPatterns.some(pattern => trimmed.includes(pattern)) &&
+ (trimmed.includes('def') || trimmed.includes('class'));
+ }, []);
+
+ useEffect(() => {
+ if (!searchTerm || !containerRef.current || !preRef.current) return;
+
+ if (scrollTimeoutRef.current) {
+ clearTimeout(scrollTimeoutRef.current);
+ }
+
+ scrollTimeoutRef.current = setTimeout(() => {
+ try {
+ const container = containerRef.current;
+ const firstHighlight = preRef.current?.querySelector('mark');
+
+ if (firstHighlight && container) {
+ const containerRect = container.getBoundingClientRect();
+ const highlightRect = firstHighlight.getBoundingClientRect();
+ const scrollTop = highlightRect.top - containerRect.top + container.scrollTop - (container.clientHeight / 2);
+
+ container.scrollTo({ top: Math.max(0, scrollTop), behavior: 'smooth' });
+ }
+ } catch (error) {
+ console.warn('Auto-scroll failed:', error);
+ }
+ }, 100);
+
+ return () => {
+ if (scrollTimeoutRef.current) {
+ clearTimeout(scrollTimeoutRef.current);
+ }
+ };
+ }, [searchTerm, value]);
+
+ const RegularText = useCallback(({ value: textValue, searchTerm: term }) => {
+ if (!textValue) return No content;
+
+ const stringValue = String(textValue);
+
+ // Check if it's Python code
+ if (isPythonCode(stringValue)) {
+ const lines = stringValue.split('\n');
+ const isNodeView = lines[0]?.startsWith('Node:');
+ const nodeTitle = isNodeView ? lines[0] : null;
+ const codeContent = isNodeView ? lines.slice(1).join('\n') : stringValue;
+
+ return (
+
+
+
+ {userdata.support_access && (
+
+
-
+ Workflow Health
+ Operational
+
- {averageUptime.toFixed(2)}%
- Success Rate
+
-
+ {averageUptime.toFixed(2)}%
+ Success Rate
+
+ )}
+
+
+ Live Executions
+
+
+
+
+
+ {/* */}
+
+
+ {/* Loading Bar for LiveExecutionsChart */}
+ {isLiveExecutionsLoading && (
+
+ {nodeTitle && (
+
+ );
+ }
+
+ if (!term) {
+ return (
+
+ {stringValue}
+
+ );
+ }
+
+ try {
+ const parts = stringValue.split(term);
+ return (
+
+ {parts.map((part, index) => (
+
+ {nodeTitle}
+
+ )}
+
+
+
+
+ {hasMatch ? (
+
+ ) : (
+
+ );
+ }
+
+ return
+
+ {newname}
+
+
+
+ )
+}
+
+export default LineChartWrapper;
diff --git a/frontend/src/components/LiveExecutionsGraph.jsx b/frontend/src/components/LiveExecutionsGraph.jsx
new file mode 100644
index 00000000..ac572e84
--- /dev/null
+++ b/frontend/src/components/LiveExecutionsGraph.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const LiveExecutionsGraph = ({ executions }) => {
+ return null
+}
+
+export default LiveExecutionsGraph
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 07be2cb8..63efe7a9 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -49,7 +49,7 @@ const menuData = {
{
title: "Shuffle",
description:
- "The most versatile automation engine with focus on security.",
+ "The most versatile automation engine. Focused on cybersecurity.",
icon: "/images/icons/shuffleLogo.svg",
path: "/docs/about",
gaData: {
@@ -61,7 +61,7 @@ const menuData = {
{
title: "Singul",
description:
- "Connect your favorite services with a singul line of code.",
+ "Connect to your favorite services with a singul line of code.",
icon: "/images/logos/singul.svg",
path: "https://singul.io",
gaData: {
@@ -70,6 +70,7 @@ const menuData = {
label: "singul_click"
}
},
+ /*
{
title: "API Explorer",
description:
@@ -82,18 +83,19 @@ const menuData = {
label: "api_explorer_click"
}
},
+ */
],
Services: [
{
- title: "Professional Services",
+ title: "Proof of Concept",
description:
- "Professional Services help you solve problems at your convenience.",
+ "Register for POC to test the best of Shuffle for free for 30 days.",
icon: "/images/ProfessionalServices.svg",
- path: "/professional-services",
+ path: "/poc",
gaData: {
category: "navbar",
action: "services_click",
- label: "professional_services_click"
+ label: "proof_of_concept_click"
}
},
{
@@ -101,7 +103,7 @@ const menuData = {
description:
"Support to help you build automations with confidence.",
icon: "/images/Support.svg",
- path: "/contact?category=support",
+ path: "/support",
gaData: {
category: "navbar",
action: "services_click",
@@ -1245,23 +1247,6 @@ const Navbar = (props) => {
>
{menuItem.title}
- {menuItem.title === "Singul" && (
-
diff --git a/frontend/src/components/OrgHeaderexpandedNew.jsx b/frontend/src/components/OrgHeaderexpandedNew.jsx
index 525491e6..d0cd4952 100644
--- a/frontend/src/components/OrgHeaderexpandedNew.jsx
+++ b/frontend/src/components/OrgHeaderexpandedNew.jsx
@@ -56,7 +56,8 @@ const OrgHeaderexpandedNew = (props) => {
adminTab,
selectedStatus,
setSelectedStatus,
- isEditOrgTab
+ isEditOrgTab,
+ handleStatusChange
} = props;
const classes = useStyles();
@@ -68,7 +69,7 @@ const OrgHeaderexpandedNew = (props) => {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 300,
- borderRadius: 20,
+ borderRadius: 4,
overflowY: "scroll",
},
},
@@ -93,40 +94,6 @@ const OrgHeaderexpandedNew = (props) => {
const { themeMode, supportEmail, brandColor } = useContext(Context);
const theme = getTheme(themeMode, brandColor);
- const handleStatusChange = (event) => {
- const { value } = event.target;
- handleEditOrg(
- orgName,
- orgDescription,
- selectedOrganization.id,
- selectedOrganization?.image,
- {
- app_download_repo: selectedOrganization?.defaults?.app_download_repo,
- app_download_branch: selectedOrganization?.defaults?.app_download_branch,
- workflow_download_repo: selectedOrganization?.defaults?.workflow_download_repo,
- workflow_download_branch: selectedOrganization?.defaults?.workflow_download_branch,
- notification_workflow: selectedOrganization?.defaults?.notification_workflow,
- documentation_reference: selectedOrganization?.defaults?.documentation_reference,
- workflow_upload_repo: selectedOrganization?.defaults?.workflow_upload_repo,
- workflow_upload_branch: selectedOrganization?.defaults?.workflow_upload_branch,
- workflow_upload_username: selectedOrganization?.defaults?.workflow_upload_username,
- workflow_upload_token: selectedOrganization?.defaults?.workflow_upload_token,
- newsletter: selectedOrganization?.defaults?.newsletter,
- weekly_recommendations: selectedOrganization?.defaults?.weekly_recommendations,
- },
- {
- sso_entrypoint: selectedOrganization?.sso_config?.sso_entrypoint,
- sso_certificate: selectedOrganization?.sso_config?.sso_certificate,
- client_id: selectedOrganization?.sso_config?.client_id,
- client_secret: selectedOrganization?.sso_config?.client_secret,
- openid_authorization: selectedOrganization?.sso_config?.openid_authorization,
- openid_token: selectedOrganization?.sso_config?.openid_token,
- SSORequired: selectedOrganization?.sso_config?.SSORequired,
- auto_provision: selectedOrganization?.sso_config?.auto_provision,
- },
- value.length === 0 ? ["none"] : value,
- )
- }
const [appDownloadBranch, setAppDownloadBranch] = React.useState(
selectedOrganization.defaults === undefined
? defaultBranch
@@ -452,7 +419,7 @@ const OrgHeaderexpandedNew = (props) => {
Description
+ Description
{
const [billingInfo, setBillingInfo] = useState({});
const [orgRequest, setOrgRequest] = React.useState(true);
const [curIndex, setCurIndex] = React.useState(0);
- const items = ['Org Configuration', "SSO", "Notifications", 'Billing & Stats', 'Branding'];
+ const items = ['Org Configuration', "SSO", "Notifications", 'Billing & Stats'];
const [visibleTabs, setVisibleTabs] = useState(items);
const [unreadNotifications, setUnreadNotifications] = React.useState(
notifications?.filter((notification) => notification.read === false)?.length
@@ -157,16 +157,16 @@ const OrganizationTab = (props) => {
isLoaded={isLoaded}
/>
);
- case 'branding':
- return {
color="primary"
style={{
textTransform: "none",
+ fontWeight: "bold",
}}
fullWidth
variant="contained"
@@ -2316,7 +2317,7 @@ const ParsedAction = (props) => {
}}
>
@@ -2814,7 +2815,7 @@ const ParsedAction = (props) => {
}}
filterOptions={(options, { inputValue }) => {
const lowercaseValue = inputValue.toLowerCase()
- options = options.filter(x => x.name.replaceAll("_", " ").toLowerCase().includes(lowercaseValue) || x.description.toLowerCase().includes(lowercaseValue))
+ options = options.filter(x => x.name?.replaceAll("_", " ").toLowerCase().includes(lowercaseValue) || x.description?.toLowerCase().includes(lowercaseValue))
return options
}}
@@ -2824,8 +2825,8 @@ const ParsedAction = (props) => {
}
const newname = (
- option.name.charAt(0).toUpperCase() + option.name.substring(1)
- ).replaceAll("_", " ");
+ option.name?.charAt(0).toUpperCase() + option.name?.substring(1)
+ )?.replaceAll("_", " ");
return newname;
}}
@@ -2877,7 +2878,7 @@ const ParsedAction = (props) => {
option.label = "No name"
}
- newActionname = (newActionname.charAt(0).toUpperCase() + newActionname.substring(1)).replaceAll("_", " ");
+ newActionname = (newActionname.charAt(0).toUpperCase() + newActionname.substring(1))?.replaceAll("_", " ");
var method = ""
var extraDescription = ""
@@ -3152,8 +3153,20 @@ const ParsedAction = (props) => {
setSelectedAction(selectedAction)
setUpdate(Math.random())
+
+ var requiresAuth = app?.authentication?.required
+ if (requiresAuth && appAuthentication?.length > 0) {
+ for (var key in appAuthentication) {
+ if (appAuthentication[key]?.app?.name === app?.name) {
+ requiresAuth = false
+ break
+ }
+ }
+ }
+
+ setRequiresAuthentication(requiresAuth);
}}>
-
+
{
}
const newname = (
- option.app_name.charAt(0).toUpperCase() + option.app_name.substring(1)
- ).replaceAll("_", " ");
+ option.app_name?.charAt(0).toUpperCase() + option.app_name?.substring(1)
+ )?.replaceAll("_", " ");
return newname;
}}
options={selectedAction.matching_actions}
@@ -3263,8 +3276,8 @@ const ParsedAction = (props) => {
newActionname = (
newActionname.charAt(0).toUpperCase() +
- newActionname.substring(1)
- ).replaceAll("_", " ");
+ newActionname?.substring(1)
+ )?.replaceAll("_", " ");
return (
diff --git a/frontend/src/components/PartnerHeader.jsx b/frontend/src/components/PartnerHeader.jsx
index 8cb84c0a..3a6a910b 100644
--- a/frontend/src/components/PartnerHeader.jsx
+++ b/frontend/src/components/PartnerHeader.jsx
@@ -741,7 +741,7 @@ const PartnerHeader = (props) => {
- {/*widgetData === undefined || widgetData === null || widgetData === [] || widgetData.length === 0 ? null :
-
-
-
-
- */}
-
{newWidgetData === undefined || newWidgetData === null || newWidgetData === [] ? null :
newWidgetData.map((data, index) => {
@@ -872,7 +864,9 @@ const Dashboard = (props) => {
);
const dataWrapper = (
-
)
@@ -169,6 +179,7 @@ export const Img = (props) => {
// Find parent container and check width
const isArticlePage = window.location.pathname.includes("/articles/")
const isFormPage = window.location.pathname.includes("/forms/")
+ const isWorkflowPage = window.location.pathname.includes("/workflows/")
var height = "auto"
var width = isArticlePage ? 1000 : isFormPage ? 400: 750
@@ -176,7 +187,7 @@ export const Img = (props) => {
const theme = getTheme(themeMode)
const docsImageStyle = {
- border: isFormPage ? null : "1px solid rgba(255,255,255,0.3)",
+ border: isFormPage || isWorkflowPage ? null : "1px solid rgba(255,255,255,0.3)",
borderRadius: theme.palette?.borderRadius,
width: width,
maxWidth: width,
diff --git a/frontend/src/views/LoginPage.jsx b/frontend/src/views/LoginPage.jsx
index b717b9f6..e470255d 100755
--- a/frontend/src/views/LoginPage.jsx
+++ b/frontend/src/views/LoginPage.jsx
@@ -5,6 +5,7 @@ import { useNavigate, Link, useParams } from "react-router-dom";
import { isMobile } from "react-device-detect";
import { toast } from 'react-toastify';
import { useInterval } from "react-powerhooks";
+import ReactGA from 'react-ga4';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
import {
@@ -157,7 +158,7 @@ const FreePlanCard = ({ classes }) => {
);
};
-const MarketplaceCard = ({ classes }) => {
+const MarketplaceCard = ({ classes, isCloud }) => {
const marketplaceOptions = [
{
name: "Open Source Install",
@@ -216,6 +217,15 @@ const MarketplaceCard = ({ classes }) => {
>
@@ -1025,7 +1103,7 @@ const LoginPage = props => {
- Name
+ Name
{
{userdata?.support ? (
-
- Status
+ Status
@@ -3506,6 +3519,8 @@ const ParsedAction = (props) => {
if (data.name === "key" && selectedAction.name.includes("cache") && selectedAction.app_name === "Shuffle Tools") {
// Show a key popout button
showCacheConfig = true
+ } else if (data.name === "category" && selectedAction.app_name === "Shuffle Tools") {
+ showCacheConfig = true
}
var disabled = false;
@@ -3733,6 +3748,7 @@ const ParsedAction = (props) => {
}
const clickedFieldId = "rightside_field_" + count;
+ const parameterFieldId = "param_" + data.name.replace(/[^a-zA-Z0-9_-]/g, '_');
var baseHelperText = ""
if (data !== undefined && data !== null && data.value !== undefined && data.value !== null && data.value.length > 0) {
@@ -3749,8 +3765,8 @@ const ParsedAction = (props) => {
}
tmpitem = (
- tmpitem.charAt(0).toUpperCase() + tmpitem.substring(1)
- ).replaceAll("_", " ");
+ tmpitem?.charAt(0).toUpperCase() + tmpitem?.substring(1)
+ )?.replaceAll("_", " ");
if (tmpitem === "Username basic") {
tmpitem = "Username"
@@ -3874,6 +3890,9 @@ const ParsedAction = (props) => {
autofill="off"
autoComplete="off"
id={clickedFieldId}
+ data-parameter={data.name}
+ data-param-id={parameterFieldId}
+ name={data.name}
disabled={disabled}
style={{
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
@@ -4316,7 +4335,7 @@ const ParsedAction = (props) => {
viewed_data = split_data[0]
}
- viewed_data = (viewed_data.charAt(0).toUpperCase() + viewed_data.slice(1)).replaceAll("_", " ")
+ viewed_data = (viewed_data?.charAt(0).toUpperCase() + viewed_data?.slice(1))?.replaceAll("_", " ")
// Check if it's selected or not and highlight
var selected = false
@@ -4379,9 +4398,9 @@ const ParsedAction = (props) => {
? values[0].autocomplete
: "$" + values[0].autocomplete;
- toComplete = toComplete.toLowerCase().replaceAll(" ", "_");
+ toComplete = toComplete?.toLowerCase()?.replaceAll(" ", "_");
for (let [key, keyval] in Object.entries(values)) {
- if (key == 0 || values[key].autocomplete.length === 0) {
+ if (key == 0 || values[key]?.autocomplete?.length === 0) {
continue;
}
@@ -4731,7 +4750,7 @@ const ParsedAction = (props) => {
);
}
- const buttonTitle = `Authenticate API ${selectedApp.name.replaceAll("_", " ")}`
+ const buttonTitle = `Authenticate the ${selectedApp?.name?.replaceAll("_", " ")} API`
const hasAutocomplete = data?.autocompleted === true
if (data.variant === undefined || data.variant === null) {
data.variant = "STATIC_VALUE"
diff --git a/frontend/src/components/PartnerDetails.jsx b/frontend/src/components/PartnerDetails.jsx
index 755e187d..9ca0aeff 100644
--- a/frontend/src/components/PartnerDetails.jsx
+++ b/frontend/src/components/PartnerDetails.jsx
@@ -222,7 +222,7 @@ const PartnerDetails = (props) => {
@@ -382,7 +397,7 @@ const PartnerDetails = (props) => {
>
Name
@@ -529,6 +544,7 @@ const PartnerDetails = (props) => {
style={{
marginRight: "12px",
color: theme.palette.text.primary,
+ fontFamily: theme?.typography?.fontFamily
}}
>
Solutions
@@ -571,7 +587,7 @@ const PartnerDetails = (props) => {
>
Region
@@ -587,7 +603,7 @@ const PartnerDetails = (props) => {
Country
@@ -671,7 +687,7 @@ const PartnerDetails = (props) => {
Description
@@ -731,7 +747,7 @@ const PartnerDetails = (props) => {
>
Website URL
@@ -794,7 +810,7 @@ const PartnerDetails = (props) => {
>
Article URL
@@ -824,7 +840,7 @@ const PartnerDetails = (props) => {
value={partnerData?.article_url}
onBlur={() => {}}
onChange={(e) => {
- if (e.target.value.length > 100) {
+ if (e.target.value.length > 1000) {
toast("Choose a shorter article URL.");
return;
}
@@ -851,7 +867,65 @@ const PartnerDetails = (props) => {
},
}}
/>
-
+
+
-
+
Name
{
/>
*/}
-
+ {
/>
Solutions
-
+
Region
{
/>
-
+ {
Country
-
+
Description
{
-
+
Website URL
{
/>
-
+
Article URL
{
animation="wave"
/>
+
+
+ Contact Email
+
+
+
+ Contact Email
+
+ {}}
+ onChange={(e) => {
+ setPartnerData({
+ ...partnerData,
+ contact_email: e.target.value,
+ });
+ }}
+ color="primary"
+ InputProps={{
+ style: {
+ color: theme.palette.textFieldStyle.color,
+ height: "35px",
+ fontSize: "1em",
+ borderRadius: 4,
+ backgroundColor:
+ theme.palette.textFieldStyle.backgroundColor,
+ },
+ classes: {
+ notchedOutline: isEditOrgTab
+ ? null
+ : classes.notchedOutline,
+ },
+ }}
+ />
+
{data}
+
+ {data}
+
);
return dataWrapper;
diff --git a/frontend/src/views/Docs.jsx b/frontend/src/views/Docs.jsx
index 2456f63d..8b4772c6 100755
--- a/frontend/src/views/Docs.jsx
+++ b/frontend/src/views/Docs.jsx
@@ -113,19 +113,29 @@ export const CopyToClipboard = (props) => {
}
export const Paragraph = (props) => {
+ // Filter out stray HTML artifacts like '>' or '/>' caused by HTML parsing edge-cases
+ const cleanedChildren = React.Children.toArray(props.children).filter((child) => {
+ if (typeof child === 'string') {
+ const trimmed = child.trim();
+ // Remove single '>' or '/>' leftovers
+ if (trimmed === '>' || trimmed === '/>') return false;
+ }
+ return true;
+ });
+
const element = React.createElement(
`p`,
{},
- props.children,
+ cleanedChildren,
)
- if (props.children[0] != undefined) {
- if(typeof props.children[0] === "string") {
- if (props.children[0].includes('.mp4')) {
+ if (cleanedChildren[0] !== undefined) {
+ if(typeof cleanedChildren[0] === "string") {
+ if (cleanedChildren[0].includes('.mp4')) {
return (
OR
- sudo chown -R 1000:1000 shuffle-database diff --git a/frontend/src/views/RunWorkflow.jsx b/frontend/src/views/RunWorkflow.jsx index a9a6cf5c..21cc9bb8 100644 --- a/frontend/src/views/RunWorkflow.jsx +++ b/frontend/src/views/RunWorkflow.jsx @@ -13,7 +13,7 @@ import { makeStyles } from '@mui/material/styles'; import { useInterval } from "react-powerhooks"; import { isMobile } from "react-device-detect"; import Markdown from "react-markdown"; -import theme from '../theme.jsx'; +import {getTheme} from '../theme.jsx'; import rehypeRaw from "rehype-raw"; import RecentWorkflow from "../components/RecentWorkflow.jsx"; @@ -58,6 +58,8 @@ const hrefStyle = { const RunWorkflow = (defaultprops) => { const { globalUrl, userdata, isLoaded, isLoggedIn, setIsLoggedIn, setCookie, register, serverside } = defaultprops; + const { themeMode, brandColor } = useContext(Context); + const theme = getTheme(themeMode, brandColor); const { supportEmail } = useContext(Context); let navigate = useNavigate(); diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx index 3fe551f4..32859549 100755 --- a/frontend/src/views/Workflows.jsx +++ b/frontend/src/views/Workflows.jsx @@ -558,7 +558,7 @@ export const handleReactJsonClipboard = (copy) => { document.execCommand("copy"); console.log("COPYING!"); - toast("Copied value to clipboard, NOT json path.") + toast.success("Copied Value, NOT json path.") } else { console.log("Failed to copy from " + elementName + ": ", copyText); } diff --git a/frontend/src/views/Workflows2.jsx b/frontend/src/views/Workflows2.jsx index d702f24f..86c28e18 100644 --- a/frontend/src/views/Workflows2.jsx +++ b/frontend/src/views/Workflows2.jsx @@ -17,11 +17,14 @@ import GetAppIcon from '@mui/icons-material/GetApp'; // Material UI & Components import { makeStyles } from "@mui/styles"; import { Navigate } from "react-router-dom"; +import { isMobile } from "react-device-detect" +import ReactGA from 'react-ga4'; + +import LineChartWrapper from "../components/LineChartWrapper.jsx"; import SecurityFramework from '../components/SecurityFramework.jsx'; import EditWorkflow from "../components/EditWorkflow.jsx" import Priority from "../components/Priority.jsx"; import { Context } from "../context/ContextApi.jsx"; -import { isMobile } from "react-device-detect" // Material UI Components import { @@ -99,6 +102,9 @@ import { Psychology as PsychologyIcon, Wifi as WifiIcon, Devices as DevicesIcon, + AutoAwesome as AutoAwesomeIcon, + BarChart as BarChartIcon, + Lock as LockIcon, } from "@mui/icons-material"; // Additional Components @@ -115,14 +121,26 @@ import { InstantSearch, Configure, connectHits, connectSearchBox, connectRefinem import { debounce } from "lodash"; import { removeQuery } from "../components/ScrollToTop.jsx"; -import {green, yellow, red, grey } from "../views/AngularWorkflow.jsx" +import {green, yellow, red, grey, triggers as wfTriggers, } from "../views/AngularWorkflow.jsx" const searchClient = algoliasearch("JNSS5CFDZZ", "c8f882473ff42d41158430be09ec2b4e"); const svgSize = 24; -const imagesize = 22; +const imagesize = 23; +// Session-based modal visibility helper +const AI_ANNOUNCEMENT_SESSION_KEY = "ai_announcement_session"; + +const getCookie = (name) => { + if (typeof document === "undefined") return ""; + const pattern = `; ${document.cookie}`; + const parts = pattern.split(`; ${name}=`); + if (parts.length === 2) { + return decodeURIComponent(parts.pop().split(";").shift() || ""); + } + return ""; +}; @@ -212,8 +230,14 @@ export const GetIconInfo = (action) => { "release", ], }, - - + { + key: "secret", + values: [ + "api", + "password", + "protect", + ], + } ]; var selectedKey = "" @@ -402,6 +426,12 @@ export const GetIconInfo = (action) => { iconBackgroundColor: "green", originalIcon: