Added more management tools for workflow running and stat management

frontend/src/components/Billing.jsx

@@ -1230,6 +1230,7 @@ const Billing = (props) => {
 				</Typography>
 			  </div>
 			  <BillingStats
+				isCloud={isCloud}
 				globalUrl={globalUrl}
 				selectedOrganization={selectedOrganization}	
 				userdata={userdata}

frontend/src/components/BillingStats.jsx

@@ -1,7 +1,14 @@
 import React, { useState, useEffect } from 'react';
 
-import classNames from "classnames";
 import theme from '../theme.jsx';
+import classNames from "classnames";
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+
+import { 
+	DatePicker, 
+	DateTimePicker,
+	LocalizationProvider,
+} from '@mui/x-date-pickers'
 
 import {
 	Tooltip,
@@ -52,12 +59,14 @@ import {
 	LinearXAxisTickLabel,
 } from 'reaviz';
 
+import { typecost, typecost_single, } from "../views/HandlePaymentNew.jsx";
+
 const LineChartWrapper = ({keys, inputname, height, width}) => {
   const [hovered, setHovered] = useState("");
 	const inputdata = keys.data === undefined ? keys : keys.data
 	
 	return (
-		<div style={{color: "white", border: "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, padding: 30, marginTop: 15, }}>
+		<div style={{color: "white", border: "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, padding: 30, marginTop: 15, backgroundColor: theme.palette.platformColor, overflow: "hidden", }}>
 			<Typography variant="h6" style={{marginBotton: 15, }}>
 				{inputname}
 			</Typography>
@@ -75,16 +84,174 @@ const LineChartWrapper = ({keys, inputname, height, width}) => {
 
 
 const AppStats = (defaultprops) => {
-  const { globalUrl, selectedOrganization, userdata, } = defaultprops;
+  const { globalUrl, selectedOrganization, userdata, isCloud, } = defaultprops;
+
   const [keys, setKeys] = useState([])
   const [searches, setSearches] = useState([]);
-  const [clickData, setClickData] = useState(undefined);
-  const [conversionData, setConversionData] = useState(undefined);
-  const [statistics, setStatistics] = useState(undefined);
   const [appRuns, setAppruns] = useState(undefined);
+  const [appRunCosts, setApprunCosts] = useState(undefined);
   const [workflowRuns, setWorkflowRuns] = useState(undefined);
   const [subflowRuns, setSubflowRuns] = useState(undefined);
 
+  const [endTime, setEndTime] = useState("")
+  const [startTime, setStartTime] = useState("")
+  const [statistics, setStatistics] = useState(undefined);
+  const [filteredStatistics, setFilteredStatistics] = useState(undefined);
+
+  const [apprunCost, setApprunCost] = useState(0)
+  const [monthToDateCost, setMonthToDateCost] = useState(0)
+  const [monthTotalCost, setMonthTotalCost] = useState(0)
+
+  const includedExecutions = selectedOrganization.sync_features.app_executions !== undefined ? selectedOrganization.sync_features.app_executions.limit : 0 
+
+  // Cost in old contracts: 0.0009 
+  // Old contracts also always included 150.000 executions
+  const invocationCost = includedExecutions === 150000 || includedExecutions === 250000 ? 0.0009 : typecost_single
+  const defaultAmount = 10000
+
+	useEffect(() => {
+		if (statistics === undefined || statistics === null) {
+			return
+		}
+
+		if (statistics["daily_statistics"] === undefined || statistics["daily_statistics"] === null) {
+			setFilteredStatistics(statistics)
+			return
+		}
+
+		// Calculate month to date cost
+		var mtd_cost = 0
+		for (let key in statistics["daily_statistics"]) {
+			const item = statistics["daily_statistics"][key]
+			if (item["date"] === undefined) {
+				continue
+			}
+
+			const date = new Date(item["date"])
+			const today = new Date()
+			if (date.getMonth() === today.getMonth()) {
+				mtd_cost += (item["app_executions"] * invocationCost)
+			}
+		}
+
+		if (isCloud && mtd_cost !== monthToDateCost) {
+			// Find how many days there have been in the current month
+			const today = new Date()
+			const daysInMonth = new Date(today.getFullYear(), today.getMonth()+1, 0).getDate()
+			// Find what day we are on
+			const day = today.getDate()
+			// Find how many days are left in the month
+			const daysLeft = daysInMonth - day
+
+			// Calculate the cost of the entire month
+			var monthTotalCost = mtd_cost/day*daysInMonth 
+			monthTotalCost -= defaultAmount*invocationCost
+			monthTotalCost -= includedExecutions*invocationCost
+
+			// Remove included amount
+  			//const defaultAmount = 10000
+			mtd_cost -= defaultAmount*invocationCost
+			mtd_cost -= includedExecutions*invocationCost
+
+			if (monthTotalCost > 0) {
+				setMonthTotalCost(monthTotalCost.toFixed(2))
+			}
+
+			if (mtd_cost > 0) {
+				setMonthToDateCost(mtd_cost.toFixed(2))
+			}
+		}
+
+		// Make a date at the 1st of the current month
+		var foundstarttime = (new Date())
+		foundstarttime.setDate(1)
+		if (startTime !== "" && startTime !== undefined && startTime !== null) {
+			foundstarttime = startTime 
+		}
+
+		// Set to tomorrow by default
+		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
+		}
+
+		// Check if start time is before the daily statistics["date"] string
+		var newlist = []
+		for (let key in statistics["daily_statistics"]) {
+			const item = statistics["daily_statistics"][key]
+			if (item["date"] === undefined) {
+				continue
+			}
+
+			const date = new Date(item["date"])
+			if (date >= foundstarttime) {
+				if (date <= foundendtime) {
+					newlist.push(item)
+				}
+			}
+		}
+
+		// If newlist is empty, set the timestamp to 1 year back and check if there are any statistics there
+		// If foundstarttime is more than 30 days back, don't do this
+		/*
+		if (newlist.length === 0 && foundstarttime.getDate() > 30) {
+			// Set the timestamp to be back 
+			foundstarttime.setFullYear(foundstarttime.getFullYear() - 1)
+			setStartTime(foundstarttime)
+
+			console.log("IN HERE")
+		}
+		*/
+
+		var tmpstats = JSON.parse(JSON.stringify(statistics))
+
+		var workflowexecutions = 0
+		var appexecutions = 0
+		var estimatedcost = 0
+		if (newlist.length > 0) {
+			tmpstats["daily_statistics"] = newlist
+
+			for (let key in newlist) {
+				const item = newlist[key]
+				if (item["workflow_executions"] === undefined) {
+					continue
+				}
+
+				workflowexecutions += item["workflow_executions"]
+				appexecutions += item["app_executions"]
+
+				estimatedcost += (item["app_executions"] * invocationCost)
+			}
+
+			tmpstats["monthly_workflow_executions"] = workflowexecutions
+			tmpstats["monthly_app_executions"] = appexecutions
+		}
+
+		// Make estimatedcost have max 2 decimals
+		if (isCloud) {
+			// Exclude includedExecutions*month
+  			// const includedExecutions = 150000
+			//estimatedcost -= (includedExecutions * invocationCost)
+
+			setApprunCost(estimatedcost.toFixed(2))
+		}
+
+		setFilteredStatistics(tmpstats)
+		handleDataSetting(tmpstats, "day") 
+
+	}, [statistics, startTime, endTime])
+
+	const handleStartTimeChange = (date) => {
+		setStartTime(date)
+	}
+	
+	const handleEndTimeChange = (date) => {
+		setEndTime(date)
+	}
+
 	const handleDataSetting = (inputdata, grouping) => {
 		if (inputdata === undefined || inputdata === null) {
 			return 
@@ -95,8 +262,6 @@ const AppStats = (defaultprops) => {
 			return
 		}
 
-		console.log("Looking at daily data: ", inputdata)
-
 		var appRuns = {
 			"key": "App Runs",
 			"data": []
@@ -112,6 +277,11 @@ const AppStats = (defaultprops) => {
 			"data": []
 		}
 
+		var appcostRuns = {
+			"key": "Cost of App Runs",
+			"data": []
+		}
+
 		for (let key in dailyStats) {
 			// Always skips first one as it has accumulated data in it
 			if (key === 0) {
@@ -119,7 +289,6 @@ const AppStats = (defaultprops) => {
 			}
 
 			const item = dailyStats[key]
-
 			if (item["date"] === undefined) {
 				console.log("No date: ", item)
 				continue
@@ -131,6 +300,12 @@ const AppStats = (defaultprops) => {
 					key: new Date(item["date"]), 
 					data: item["app_executions"]
 				})
+
+				// Add number 
+				appcostRuns["data"].push({
+					key: new Date(item["date"]),
+					data: (item["app_executions"] * invocationCost).toFixed(2)
+				})
 			} 
 
 			// Check if workflow_executions key in item
@@ -150,12 +325,16 @@ const AppStats = (defaultprops) => {
 		}
 
 		// Adds data for today 
-		console.log("Inputdata: ", inputdata)
 		if (inputdata["daily_app_executions"] !== undefined && inputdata["daily_app_executions"] !== null) {
 			appRuns["data"].push({
 				key: new Date(),
 				data: inputdata["daily_app_executions"]
 			})
+
+			appcostRuns["data"].push({
+				key: new Date(),
+				data: (inputdata["daily_app_executions"] * invocationCost).toFixed(2)
+			})
 		}
 
 		if (inputdata["daily_workflow_executions"] !== undefined && inputdata["daily_workflow_executions"] !== null) {
@@ -175,6 +354,7 @@ const AppStats = (defaultprops) => {
 		setSubflowRuns(subflowRuns)
 		setWorkflowRuns(workflowRuns)
 		setAppruns(appRuns)
+		setApprunCosts(appcostRuns)
 	}	
 
 	const getStats = () => {
@@ -186,25 +366,25 @@ const AppStats = (defaultprops) => {
 		  },
 		  credentials: "include",
 		})
-			.then((response) => {
-				if (response.status !== 200) {
-					console.log("Status not 200 for workflows :O!: ", response.status);
-					return;
-				}
+		.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
-				}
+			return response.json();
+		})
+		.then((responseJson) => {
+			if (responseJson["success"] === false) {
+				return
+			}
 
-				setStatistics(responseJson)
-				handleDataSetting(responseJson, "day")
-			})
-			.catch((error) => {
-				console.log("error: ", error)
-			});
+			setStatistics(responseJson)
+			handleDataSetting(responseJson, "day")
+		})
+		.catch((error) => {
+			console.log("error: ", error)
+		});
 	}
 	
 	useEffect(() => {
@@ -215,40 +395,126 @@ const AppStats = (defaultprops) => {
 		textAlign: "center", 
 		padding: 40, 
 		margin: 5, 
-		backgroundColor: theme.palette.surfaceColor,
+		backgroundColor: theme.palette.platformColor,
+		border: "1px solid rgba(255,255,255,0.3)",
 		maxWidth: 300,
 	}
 
   	const data = (
     <div className="content" style={{width: "100%", margin: "auto", }}>
 		<Typography variant="body1" style={{margin: "auto", marginLeft: 10, marginBottom: 20, }}>
-			All Stat widgets are monthly and gathered from <a 
+			All shown statistics are gathered from <a 
 				href={`${globalUrl}/api/v1/orgs/${selectedOrganization.id}/stats`} 
 				target="_blank"
 				style={{ textDecoration: "none", color: "#f85a3e",}}
-			>Your Organization Statistics. </a>
-			This is a feature to help give you more insight into Shuffle, and will be populating over time.
+			>Your Organization Statistics </a>
+			This is a feature to help give you more insight into Shuffle, and to understand your utilization of the Shuffle platform. <b>The billing tracker is in Beta, and is always calculated manually before being invoiced.</b>
 		</Typography>
-		{statistics !== undefined ?
-			<div style={{display: "flex", textAlign: "center",}}>
-				<Paper style={paperStyle}>
-					<Typography variant="h4">
-						{statistics.monthly_workflow_executions}
-					</Typography>
-					<Typography variant="h6">
-						Workflow Runs 
-					</Typography>
-				</Paper>
-				<Paper style={paperStyle}>
-					<Typography variant="h4">
-						{statistics.monthly_app_executions}
-					</Typography>
-					<Typography variant="h6">
-						App Runs 
-					</Typography>
-				</Paper>
-			</div>
-		: null}
+
+		<div style={{display: "flex", textAlign: "center",}}>
+			{filteredStatistics !== undefined ?
+				<div style={{flex: 1, display: "flex", textAlign: "center",}}>
+					<Tooltip title={
+						<Typography variant="body1" style={{padding: 10, }}>
+							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}. 
+						</Typography>
+					}>
+						<Paper style={paperStyle}>
+							<Typography variant="h4">
+								${apprunCost}
+							</Typography>
+							<Typography variant="h6">
+								Period Cost
+							</Typography>
+						</Paper>
+					</Tooltip>
+					<Tooltip title={
+						<Typography variant="body1" style={{padding: 10, }}>
+							App runs in the selected period
+						</Typography>
+					}>
+					<Paper style={paperStyle}>
+						<Typography variant="h4">
+							{filteredStatistics.monthly_app_executions === null || filteredStatistics.monthly_app_executions === undefined ? 0 : filteredStatistics.monthly_app_executions}
+						</Typography>
+						<Typography variant="h6">
+							App Runs 
+						</Typography>
+					</Paper>
+					</Tooltip> 
+					<Tooltip title={
+						<Typography variant="body1" style={{padding: 10, }}>
+							Workflow runs in the selected period 
+						</Typography>
+					}>
+						<Paper style={paperStyle}>
+							<Typography variant="h4">
+								{filteredStatistics.monthly_workflow_executions === null || filteredStatistics.monthly_workflow_executions === undefined ? 0 : filteredStatistics.monthly_workflow_executions}
+							</Typography>
+							<Typography variant="h6">
+								Workflow Runs 
+							</Typography>
+						</Paper>
+					</Tooltip>
+					<Tooltip title={
+						<Typography variant="body1" style={{padding: 10, }}>
+							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}.
+						</Typography>
+					}>
+						<Paper style={{
+							textAlign: "center", 
+							padding: 40, 
+							margin: 5, 
+							marginLeft: 90, 
+							backgroundColor: theme.palette.platformColor,
+							border: "1px solid rgba(255,255,255,0.3)",
+							maxWidth: 300,
+						}}>
+							<Typography variant="h4">
+								${monthTotalCost}
+							</Typography>
+							<Typography variant="h6">
+								Estimated cost 
+							</Typography>
+						</Paper>
+					</Tooltip>
+				</div>
+			: null}
+
+			<LocalizationProvider dateAdapter={AdapterDayjs} style={{flex: 1, }}>
+				<div style={{display: "flex", flexDirection: "column", }}>
+					<DateTimePicker
+					  sx={{
+						marginTop: 1, 
+						marginLeft: 1,
+						minWidth: 240,
+						maxWidth: 240,
+					  }}
+					  ampm={false}
+					  label="Search from"
+					  format="YYYY-MM-DD HH:mm:ss"
+					  value={startTime}
+					  onChange={handleStartTimeChange}
+					  renderInput={(params) => <TextField {...params} />}
+					/>
+					<DateTimePicker
+					  sx={{
+						marginTop: 1, 
+						marginLeft: 1,
+						minWidth: 240,
+						maxWidth: 240,
+					  }}
+					  ampm={false}
+					  label="Search until"
+					  format="YYYY-MM-DD HH:mm:ss"
+					  value={endTime}
+					  onChange={handleEndTimeChange}
+					  renderInput={(params) => <TextField {...params} />}
+					/>
+				</div>
+			</LocalizationProvider>
+
+		</div>
 
 		{appRuns === undefined ? 
 			null
@@ -267,6 +533,12 @@ const AppStats = (defaultprops) => {
 			: 
 			<LineChartWrapper keys={subflowRuns} height={300} width={"100%"} inputname={"Subflow Runs"}/>
 		}
+
+		{/*appRunCosts === undefined ? 
+			null
+			: 
+			<LineChartWrapper keys={appRunCosts} height={300} width={"100%"} inputname={"Apprun cost - Cost per day"}/>
+		*/}
     </div>
   )
 

frontend/src/components/RuntimeDebugger.jsx

@@ -830,6 +830,7 @@ const RuntimeDebugger = (props) => {
 					);
 				  }}
 				/>
+
 				<LocalizationProvider dateAdapter={AdapterDayjs}>
 		        	<DateTimePicker
 					  sx={{
@@ -859,8 +860,8 @@ const RuntimeDebugger = (props) => {
 					  onChange={handleEndTimeChange}
 					  renderInput={(params) => <TextField {...params} />}
 					/>
-
 				</LocalizationProvider>
+
 				<Button
 					variant="outlined"
 					color="primary"

frontend/src/components/WorkflowTemplatePopup.jsx

@@ -448,7 +448,7 @@ const WorkflowTemplatePopup = (props) => {
 
 
 	return (
-		<div style={{ display: "flex", maxWidth: isCloud ? 470 : isMobile? 345: 450, minWidth: isCloud ? 470 : isMobile? null: 450, height: 78, borderRadius: 8, }}>
+		<div style={{ display: "flex", maxWidth: isCloud ? isMobile ? null : 470 : isMobile? 345: 450, minWidth: isCloud ? isMobile ? null : 470 : isMobile? null: 450, height: 78, borderRadius: 8, justifyContent: isMobile ? null : "center" }}>
 			<ModalView />
 			<div
 				// variant={isActive === 1 ? "contained" : "outlined"} 
@@ -522,7 +522,7 @@ const WorkflowTemplatePopup = (props) => {
 							<div style={{width: 50, }} />
 						}	
 					</div>
-					<div style={{ flex: 3, marginLeft: 20, }}>
+					<div style={{ flex: 3, marginLeft: 20, maxHeight: 50, overflow: "hidden", }}>
 						<Typography variant="body1" style={{ marginTop: parsedDescription.length === 0 ? 10 : 0, fontSize: isMobile ? 13 : 16,fontWeight: isHomePage? 600 : null,textTransform: 'capitalize', color: isHomePage ? "var(--White-text, #F1F1F1)" :"rgba(241, 241, 241, 1)"}} >
 							{parsedTitle}
 						</Typography>