Fixed Tenzir force start from frontend

This commit is contained in:
Frikky
2025-01-09 22:31:53 +01:00
parent 2fd7f65831
commit aab73b5ecc
14 changed files with 2164 additions and 1564 deletions
+126 -92
View File
@@ -11,6 +11,8 @@ import {
Button,
Stack,
Avatar,
Skeleton,
Tooltip,
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
@@ -38,6 +40,7 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
const [inputUsecase, setInputUsecase] = useState({})
const [latestUsecase, setLatestUsecase] = useState([])
const [foundAppUsecase, setFoundAppUsecase] = useState({})
const [usecaseLoading, setUsecaseLoading] = useState(false)
const navigate = useNavigate();
const parseUsecase = (subcase) => {
const srcdata = findSpecificApp(frameworkData, subcase.type)
@@ -142,6 +145,19 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
})
setLatestUsecase(newUsecases)
if (newUsecases?.length > 0) {
const foundCategory = newUsecases?.find((category) =>
category?.list?.some((subcase) => subcase?.srcapp === app?.name || subcase?.dstapp === app?.name)
);
const foundSubcase = foundCategory?.list?.find(
(subcase) => subcase?.srcapp === app?.name || subcase?.dstapp === app?.name
);
setFoundAppUsecase(foundSubcase);
}
setUsecaseLoading(false)
// Matching workflows with usecases
if (responseJson.success !== false) {
if (workflows !== undefined && workflows !== null && workflows.length > 0) {
@@ -275,23 +291,12 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
useEffect(() => {
setUsecaseLoading(true)
getAvailableWorkflows()
getFramework()
}, [app])
useEffect(() => {
const foundCategory = latestUsecase?.find((category) =>
category?.list?.some((subcase) => subcase?.srcapp === app?.name || subcase?.dstapp === app?.name)
);
const foundSubcase = foundCategory?.list?.find(
(subcase) => subcase?.srcapp === app?.name || subcase?.dstapp === app?.name
);
setFoundAppUsecase(foundSubcase);
}, [latestUsecase])
const downloadApp = (inputdata) => {
const id = inputdata.id;
@@ -389,9 +394,8 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
newAppname = newAppname?.replaceAll("_", " ");
}
var canEditApp = userdata.admin === "true" || userdata?.id === app?.owner || app?.owner === "" || (userdata.admin === "true" && userdata.active_org.id === app?.reference_org) || !app?.generated
var canEditApp = userdata !== undefined && (userdata?.admin === "true" || userdata?.id === app?.owner || app?.owner === "" || (userdata?.admin === "true" && userdata?.active_org?.id === app?.reference_org)) || !app?.generated
return (
<Dialog
@@ -501,28 +505,37 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
app?.private_id !== undefined &&
app?.private_id?.length > 0 &&
app?.generated ? (
<Button
variant="contained"
<Tooltip title="Download OpenAPI"
placement="top"
arrow
sx={{
bgcolor: '#494949',
'&:hover': { bgcolor: '#494949' },
textTransform: 'none',
borderRadius: 1,
minWidth: '45px',
width: '45px',
height: '40px',
padding: 2,
color: "#fff",
fontFamily: theme?.typography?.fontFamily
}}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
downloadApp(app);
}}
>
<CloudDownloadOutlined />
</Button>) : null}
<Button
variant="contained"
sx={{
bgcolor: '#494949',
'&:hover': { bgcolor: '#494949' },
textTransform: 'none',
borderRadius: 1,
minWidth: '45px',
width: '45px',
height: '40px',
padding: 2,
color: "#fff",
fontFamily: theme?.typography?.fontFamily
}}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
downloadApp(app);
}}
>
<CloudDownloadOutlined />
</Button>
</Tooltip>
) : null}
<Button
variant="contained"
sx={{
@@ -655,21 +668,32 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
justifyContent: "start",
width: "100%"
}}>
<div style={{
fontFamily: theme?.typography?.fontFamily,
fontSize: "16px",
color: "#fff",
marginBottom: "16px",
fontWeight: 600
}}>
{
(foundAppUsecase?.srcapp !== undefined && foundAppUsecase?.dstapp !== undefined) ? (
"Connect " + foundAppUsecase?.srcapp?.replaceAll("_", " ") + " to " + foundAppUsecase?.dstapp?.replaceAll("_", " ")
) : (
"Connect " + app?.name + " to any tool"
)
}
</div>
{usecaseLoading ? (
<Skeleton
variant="text"
width="55%"
sx={{
fontSize: "16px",
mb: "16px",
}}
/>
) : (
<div style={{
fontFamily: theme?.typography?.fontFamily,
fontSize: "16px",
color: "#fff",
marginBottom: "16px",
fontWeight: 600
}}>
{
(foundAppUsecase?.srcapp !== undefined && foundAppUsecase?.dstapp !== undefined) ? (
"Connect " + foundAppUsecase?.srcapp?.replaceAll("_", " ") + " to " + foundAppUsecase?.dstapp?.replaceAll("_", " ")
) : (
"Connect " + app?.name.replaceAll("_", " ") + " to any tool"
)
}
</div>
)}
<Box sx={{
bgcolor: '#2F2F2F',
@@ -679,49 +703,56 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
alignItems: 'center',
mb: 3
}}>
<Stack direction="row" spacing={-1}>
{
foundAppUsecase === undefined ? (
<Avatar sx={{ width: 32, height: 32, bgcolor: 'background.paper', border: 1, borderColor: 'divider' }}>
<Search sx={{ color: 'text.primary', zIndex: 10, fontSize: 18 }} />
</Avatar>
) : (
<Avatar
src={foundAppUsecase?.srcimg}
sx={{
width: 32,
height: 32,
bgcolor: 'background.paper',
border: 1,
borderColor: 'divider',
zIndex: 10
}}
/>
)
}
{
foundAppUsecase === undefined ? (
<Avatar sx={{ width: 32, height: 32, bgcolor: 'background.paper', border: 1, borderColor: 'divider' }}>
<AddIcon sx={{ color: 'text.primary', zIndex: 10, fontSize: 18 }} />
</Avatar>
) : (
<Avatar
src={foundAppUsecase?.dstimg}
sx={{
width: 32,
height: 32,
bgcolor: 'background.paper',
border: 1,
borderColor: 'divider',
zIndex: 10
}}
/>
)
}
</Stack>
<Typography sx={{ ml: 2, fontSize: "16px", letterSpacing: "0.5px" }}>
{foundAppUsecase?.name || "Search for a Usecase"}
</Typography>
{usecaseLoading ? (
<Stack direction="row" spacing={2} alignItems="center" sx={{ width: '100%' }}>
<Stack direction="row" spacing={-1}>
<Skeleton variant="circular" width={32} height={32} />
<Skeleton variant="circular" width={32} height={32} />
</Stack>
<Skeleton variant="text" sx={{ flexGrow: 1 }} width={200} />
</Stack>
) : (
<>
<Stack direction="row" spacing={-1}>
{foundAppUsecase?.srcapp === undefined ? (
<Avatar sx={{ width: 32, height: 32, bgcolor: 'background.paper', border: 1, borderColor: 'divider' }} src={app?.image_url || app?.large_image}>
</Avatar>
) : (
<Avatar
src={foundAppUsecase?.srcimg}
sx={{
width: 32,
height: 32,
bgcolor: 'background.paper',
border: 1,
borderColor: 'divider',
zIndex: 10
}}
/>
)}
{foundAppUsecase?.dstapp === undefined ? (
<Avatar sx={{ width: 32, height: 32, bgcolor: 'background.paper', border: 1, borderColor: 'divider' }}>
<AddIcon sx={{ color: 'text.primary', zIndex: 10, fontSize: 18 }} />
</Avatar>
) : (
<Avatar
src={foundAppUsecase?.dstimg}
sx={{
width: 32,
height: 32,
bgcolor: 'background.paper',
border: 1,
borderColor: 'divider',
zIndex: 10
}}
/>
)}
</Stack>
<Typography sx={{ ml: 2, fontSize: "16px", letterSpacing: "0.5px" }}>
{foundAppUsecase?.name || "Search for a Usecase"}
</Typography>
</>
)}
</Box>
</div>
@@ -742,10 +773,13 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
minWidth: '200px'
}}
onClick={() => {
navigate("/usecases2")
navigate("/usecases")
}}
disabled={usecaseLoading}
>
Find a Usecase
{
(foundAppUsecase !== undefined && foundAppUsecase !== null && usecaseLoading === false) ? "See usecase" : "Find a Usecase"
}
</Button>
</div>
</DialogContent>
+9 -9
View File
@@ -536,15 +536,16 @@ const AppSelection = props => {
})}
</Grid>
</div>
{
!isAppPage && (
<>
{!moreButton ? (
<div style={{ width: "100%", marginLeft: isMobile ? 80 : 200, marginBottom: 20, textAlign: isMobile ? "center" : null }}>
<Link style={{ color: "#FF8444" }} onClick={() => {
setMoreButton(true)
setTimeout(() => {
navigate("/welcome?tab=2")
if (isAppPage) {
navigate("/apps?tab=all_apps")
} else {
navigate("/welcome?tab=2")
}
}, 250)
}}
>See More Apps</Link>
@@ -552,15 +553,14 @@ const AppSelection = props => {
<div style={{ flexDirection: "row", width: isMobile ? 340 : null, textAlign: isMobile ? "center" : null }}>
<Button variant="contained" type="submit" fullWidth style={bottomButtonStyle} onClick={() => {
navigate("/usecases2")
setActiveStep(2)
navigate("/usecases")
if(!isAppPage) {
setActiveStep(2)
}
}}>
See usecases
</Button>
</div>
</>
)
}
</div>
</Fade>
)
+1
View File
@@ -537,6 +537,7 @@ const CacheView = memo((props) => {
padding: "15px 5px",
maxHeight: 300,
verticalAlign: "middle",
maxWidth: 300,
}}
primary={validate.valid ?
<ReactJson
+424 -32
View File
@@ -22,6 +22,9 @@ import {
DialogActions,
Typography,
Skeleton,
Checkbox,
Chip,
Menu,
} from "@mui/material";
import {
@@ -35,6 +38,7 @@ import {
Publish as PublishIcon,
Clear as ClearIcon,
Add as AddIcon,
SelectAll,
} from "@mui/icons-material";
import Dropzone from "../components/Dropzone.jsx";
@@ -61,6 +65,14 @@ const Files = memo((props) => {
const [downloadBranch, setDownloadBranch] = React.useState("main");
const [downloadFolder, setDownloadFolder] = React.useState("translation_standards");
const [contentLoading, setContentLoading] = React.useState(false)
const [selectAllChecked, setSelectAllChecked] = React.useState(false)
const [selectedFiles, setSelectedFiles] = useState([]);
const [selectedFileId, setSelectedFileId] = useState([])
const [showFileCategoryPopup, setShowFileCategoryPopup] = useState(false)
const [updateToThisCategory, setUpdateToThisCategory] = useState("")
const [showDistributionPopup, setShowDistributionPopup] = useState(false)
const [selectedSubOrg, setSelectedSubOrg] = useState([])
const [fileIdSelectedForDistribution, setFileIdSelectedForDistribution] = useState("")
//const alert = useAlert();
const allowedFileTypes = ["txt", "py", "yaml", "yml","json", "html", "js", "csv", "log", "eml", "msg", "md", "xml", "sh", "bat", "ps1", "psm1", "psd1", "ps1xml", "pssc", "psc1", "response"]
var upload = "";
@@ -80,6 +92,56 @@ const Files = memo((props) => {
}
const changeDistribution = (id, selectedSubOrg) => {
editFileConfig(id, "suborg_distribute", [...new Set(selectedSubOrg)])
}
const editFileConfig = (id, parentAction, selectedSubOrg) => {
const data = {
id: id,
action: parentAction !== undefined && parentAction !== null ? parentAction : "change_category",
selected_suborgs: selectedSubOrg,
}
const url = globalUrl + "/api/v1/files/" + id + "/config";
fetch(url, {
mode: "cors",
method: "POST",
body: JSON.stringify(data),
credentials: "include",
crossDomain: true,
withCredentials: true,
headers: {
"Content-Type": "application/json; charset=utf-8",
},
})
.then((response) =>
response.json().then((responseJson) => {
if (responseJson["success"] === false) {
toast("Failed overwriting files");
} else {
toast("Successfully updated file!");
setTimeout(() => {
getFiles();
}, 1000);
}
})
)
.catch((error) => {
toast("Err: " + error.toString());
});
};
const handleFileCheckboxChange = (index) => {
setSelectedFiles((prevSelected) => {
const updatedSelected = [...prevSelected];
updatedSelected[index] = !updatedSelected[index];
return updatedSelected;
});
};
const runUpdateText = (text) =>{
fetch(`${globalUrl}/api/v1/files/${openFileId}/edit`, {
method: "PUT",
@@ -137,6 +199,7 @@ const Files = memo((props) => {
if (responseJson.files !== undefined && responseJson.files !== null) {
setFiles(responseJson.files);
setShowLoader(false)
setShowDistributionPopup(false)
} else if (responseJson.list !== undefined && responseJson.list !== null) {
// Set the "namespace" field in all items
if (namespace !== undefined && namespace !== null) {
@@ -152,6 +215,7 @@ const Files = memo((props) => {
} else {
setFiles([]);
setShowLoader(false)
setShowDistributionPopup(false)
}
if (namespace === undefined || namespace === null || namespace === "default") {
@@ -256,7 +320,7 @@ const Files = memo((props) => {
zIndex: 1000,
minWidth: "800px",
minHeight: "320px",
overflow: "hidden",
overflow: "auto",
'& .MuiDialogContent-root': {
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
},
@@ -400,6 +464,127 @@ const Files = memo((props) => {
</Dialog>
: null
const handleSelectSubOrg = (id, action) => {
if (action === "all") {
const childOrgs = userdata.orgs.filter(
(data) => data.creator_org === userdata.active_org.id
);
setSelectedSubOrg((prev) => {
if (prev.length === childOrgs.length) {
// If all child orgs are already selected, clear the selection
return [];
} else {
// Otherwise, select all child org IDs
return childOrgs.map((data) => data.id);
}
});
} else if (action === "none") {
setSelectedSubOrg([]);
} else {
setSelectedSubOrg((prev) => {
if (prev.includes(id)) {
return prev.filter((data) => data !== id);
} else {
return [...prev, id];
}
});
}
};
const fileDistributionModal = showDistributionPopup ? (
<Dialog
open={showDistributionPopup}
onClose={() => setShowDistributionPopup(false)}
PaperProps={{
sx: {
borderRadius: theme?.palette?.DialogStyle?.borderRadius,
border: theme?.palette?.DialogStyle?.border,
fontFamily: theme?.typography?.fontFamily,
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
zIndex: 1000,
minWidth: "600px",
minHeight: "320px",
overflow: "auto",
'& .MuiDialogContent-root': {
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
},
'& .MuiDialogTitle-root': {
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
},
'& .MuiDialogActions-root': {
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
},
},
}}
>
<DialogTitle>
<div style={{ color: "rgba(255,255,255,0.9)" }}>
Select sub-org to distribute files
</div>
</DialogTitle>
<DialogContent style={{ color: "rgba(255,255,255,0.65)" }}>
<MenuItem value="none" onClick={()=> {handleSelectSubOrg(null, "none")}}>None</MenuItem>
<MenuItem value="all" onClick={()=> {handleSelectSubOrg(null, "all")}}>All</MenuItem>
{userdata.orgs.map((data, index) => {
if (data.creator_org !== userdata.active_org.id) {
return null;
}
const imagesize = 22;
const imageStyle = {
width: imagesize,
height: imagesize,
pointerEvents: "none",
marginRight: 10,
marginLeft: data.id === userdata.active_org.id ? 0 : 20,
};
const image = data.image === "" ? (
<img alt={data.name} src={theme.palette.defaultImage} style={imageStyle} />
) : (
<img alt={data.name} src={data.image} style={imageStyle} />
);
return (
<MenuItem
key={index}
value={data.id}
onClick={() => handleSelectSubOrg(data.id)}
style={{ display: "flex", alignItems: "center" }}
>
<Checkbox
checked={selectedSubOrg.includes(data.id)}
/>
{image}
<span style={{ marginLeft: 8 }}>{data.name}</span>
</MenuItem>
);
})}
<div style={{ display: "flex", marginTop: 20 }}>
<Button
style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#ff8544" }}
onClick={() => setShowDistributionPopup(false)}
color="primary"
>
Cancel
</Button>
<Button
variant="contained"
style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#1a1a1a", backgroundColor: "#ff8544", marginLeft: 10 }}
onClick={() => {
changeDistribution(fileIdSelectedForDistribution, selectedSubOrg);
}}
color="primary"
>
Submit
</Button>
</div>
</DialogContent>
</Dialog>
): null
const deleteFile = (file) => {
fetch(globalUrl + "/api/v1/files/" + file.id, {
method: "DELETE",
@@ -636,7 +821,7 @@ const Files = memo((props) => {
setTimeout(() => {
getFiles()
}, 2500);
}, 3000);
};
const uploadFile = (e) => {
@@ -649,6 +834,68 @@ const Files = memo((props) => {
uploadFiles(files);
};
const handleUpdateFileCategory = (namespace) => {
if (selectedFiles.length === 0 && !selectAllChecked) {
toast("Please select files to update category")
return
}
if (namespace === undefined || namespace === null || namespace === "") {
toast("Please select a category to update files to")
return
}
const url = globalUrl + `/api/v1/files/namespaces/${namespace}/share`
const data = {
SelectedFiles: selectedFileId,
}
setShowLoader(true)
fetch(url, {
mode: "cors",
method: "POST",
body: JSON.stringify(data),
credentials: "include",
crossDomain: true,
withCredentials: true,
headers: {
"Content-Type": "application/json; charset=utf-8",
},
})
.then((response) =>
response.json().then((responseJson) => {
if (responseJson["success"] === false) {
toast("Failed overwriting files");
} else {
setSelectAllChecked(false)
setSelectedFiles([])
setSelectedFileId([])
setShowFileCategoryPopup(false)
setSelectedCategory(namespace)
setTimeout(() => {
getFiles();
toast("Successfully updated file!");
if (window.location.search.includes("category=")) {
const newurl = window.location.href.replace(/category=[^&]+/, `category=${namespace}`)
window.history.pushState({ path: newurl }, "", newurl)
} else {
window.history.pushState({ path: window.location.href }, "", `${window.location.href}&category=${namespace}`)
}
}, 1000);
}
}
))
.catch((error) => {
toast("Err: " + error.toString());
});
}
return (
<Dropzone
style={{
@@ -659,6 +906,7 @@ const Files = memo((props) => {
}}
onDrop={uploadFile}
>
{fileDistributionModal}
<div style={{width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: '#212121',borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949", }}>
<div style={{height: "100%", maxHeight: 1700,overflowY: 'auto', scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
@@ -739,13 +987,18 @@ const Files = memo((props) => {
}}
value={selectedCategory}
onChange={(event) => {
if (selectAllChecked || selectedFiles.length > 0) {
setUpdateToThisCategory(event.target.value)
setShowFileCategoryPopup(true)
return
}
setSelectedCategory(event.target.value)
if (event.target.value === "all" || event.target.value === "default") {
getFiles()
} else {
getFiles(event.target.value)
}
// Add it to the url as a query
if (window.location.search.includes("category=")) {
@@ -768,14 +1021,41 @@ const Files = memo((props) => {
);
})}
</Select>
<Dialog
PaperProps={{
sx: {
borderRadius: theme?.palette?.DialogStyle?.borderRadius,
border: theme?.palette?.DialogStyle?.border,
fontFamily: theme?.typography?.fontFamily,
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
zIndex: 1000,
'& .MuiDialogContent-root': {
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
},
'& .MuiDialogTitle-root': {
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
},
'& .MuiDialogActions-root': {
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
},
},
}} open={showFileCategoryPopup} onClose={() => setShowFileCategoryPopup(false)}>
<DialogTitle>File Categories</DialogTitle>
<DialogContent>
Please note that your selected files ({selectedFileId?.length}) will be moved to the <kbd>{updateToThisCategory}</kbd> category.
</DialogContent>
<DialogActions>
<Button onClick={() => setShowFileCategoryPopup(false)} style={{fontSize: 16, textTransform: 'none'}}>Close</Button>
<Button onClick={() => handleUpdateFileCategory(updateToThisCategory)} style={{fontSize: 16, textTransform: 'none', color: "#1a1a1a", backgroundColor: "#ff8544"}}>Update</Button>
</DialogActions>
</Dialog>
</FormControl>
) : null}
<div style={{display: "inline-flex", position:"relative", top: 8}}>
{renderTextBox ?
<Tooltip title={"Close"} style={{}} aria-label={""}>
<Button
style={{ marginLeft: 5, marginRight: 15 }}
style={{ marginLeft: 5, marginRight: 15, height: 35, borderRadius: 4, backgroundColor: "#494949", textTransform: 'none', fontSize: 16, color: "#f1f1f1" }}
color="primary"
onClick={() => {
setRenderTextBox(false);
@@ -803,10 +1083,24 @@ const Files = memo((props) => {
{renderTextBox && <TextField
onKeyPress={(event)=>{
handleKeyDown(event);
if(event.key === 'Enter' && selectedFileId.length > 0){
setShowFileCategoryPopup(true)
setUpdateToThisCategory(event.target.value)
}
}}
style={{
height: 35,
width: 200,
marginTop: 0,
}}
InputProps={{
style: {
color: "white",
height: 35,
fontSize: 16,
borderRadius: 4,
paddingTop: 0,
},
}}
color="primary"
@@ -816,7 +1110,6 @@ const Files = memo((props) => {
defaultValue={""}
autoFocus
/>}</div>
<ShuffleCodeEditor
isCloud={isCloud}
expansionModalOpen={openEditor}
@@ -852,30 +1145,70 @@ const Files = memo((props) => {
tableLayout: "auto",
display: "table",
minWidth: 800,
overflowX: "auto"
overflowX: "auto",
paddingBottom: 0,
}}
>
<ListItem style={{width:isSelectedFiles?"100%":null, borderBottom:isSelectedFiles?"1px solid #494949":null, display: 'table-row'}}>
{["Name", "Workflow", "Md5", "Status", "Filesize", "Actions"].map((header, index) => (
<ListItemText
key={index}
primary={header}
style={{
display: "table-cell",
padding: index === 0 ? "0px 8px 8px 15px": "0px 8px 8px 8px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
borderBottom: "1px solid #494949",
verticalAlign: "middle"
}}
primaryTypographyProps={{
<ListItem
style={{
borderBottom: "1px solid #494949" ,
display: "table-row"
}}
>
{[
<Tooltip title={"Select all files"} style={{}} aria-label={""}>
<Checkbox
sx={{padding: 0}}
onChange={() => {
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)
);
}
}}
/>
</Tooltip>,
"Name",
"Workflow",
"Md5",
"Status",
"Filesize",
"Actions",
"Distribution"
]
.filter(Boolean)
.map((header, index) => (
<ListItemText
key={index}
primary={header}
style={{
display: "table-cell",
padding: index === 0 ? "0px 8px 8px 15px" : "0px 8px 8px 8px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
borderBottom: "1px solid #494949",
verticalAlign: "middle"
}}
primaryTypographyProps={{
style: {
paddingLeft: 10,
paddingLeft: 10
}
}}
/>
))}
</ListItem>
}}
/>
))}
</ListItem>
{showLoader ?
[...Array(6)].map((_, rowIndex) => (
<ListItem
@@ -885,7 +1218,7 @@ const Files = memo((props) => {
backgroundColor: "#212121",
}}
>
{Array(6)
{Array(8)
.fill()
.map((_, colIndex) => (
<ListItemText
@@ -928,7 +1261,7 @@ const Files = memo((props) => {
if (index % 2 === 0) {
bgColor = isSelectedFiles ? "#1A1A1A":"#1f2023";
}
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])
return (
@@ -953,6 +1286,26 @@ const Files = memo((props) => {
primary={new Date(file.updated_at * 1000).toISOString()}
/>
*/}
<ListItemText
style={{
display: 'table-cell',
overflow: "hidden",
textAlign: "center",
}}
>
<Checkbox
style={{ padding: 0 }}
disabled={file.org_id !== selectedOrganization.id}
checked={!!selectedFiles[index] || selectAllChecked}
onChange={() => {handleFileCheckboxChange(index); setSelectedFileId(prev => {
if (prev.includes(file.id)) {
return prev.filter((item) => item !== file.id)
} else {
return [...prev, file.id]
}
})}}
/>
</ListItemText>
<ListItemText
primaryTypographyProps={{
style: {
@@ -1064,7 +1417,7 @@ const Files = memo((props) => {
>
<span>
<IconButton
disabled={!iseditable}
disabled={!iseditable || file.org_id !== selectedOrganization.id}
style = {{padding: "6px", }}
onClick={() => {
setOpenEditor(true)
@@ -1137,7 +1490,6 @@ const Files = memo((props) => {
<IconButton
style = {{padding: "6px"}}
onClick={() => {
console.log("file is : ", file)
navigator.clipboard.writeText(file.id);
document.execCommand("copy");
@@ -1154,7 +1506,7 @@ const Files = memo((props) => {
>
<span>
<IconButton
disabled={file.status !== "active"}
disabled={file.status !== "active" || file.org_id !== selectedOrganization.id}
style={{ padding: "6px" }}
onClick={() => {
deleteFile(file);
@@ -1166,7 +1518,7 @@ const Files = memo((props) => {
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
stroke: file.status === "active" ? "#fd4c62" : "#c8c8c8",
stroke: file.status === "active" && file.org_id === selectedOrganization.id ? "#fd4c62" : "#c8c8c8",
}}
>
<path
@@ -1192,6 +1544,46 @@ const Files = memo((props) => {
// overflow: "hidden",
}}
/>
<ListItemText primaryTypographyProps={{
style: {
padding: 8
}
}} style={{ display: "table-cell", textAlign: 'center', verticalAlign: 'middle'}} >
{selectedOrganization.id !== undefined && file?.org_id !== selectedOrganization.id ?
<Tooltip
title="Parent organization controlled file. You can use, but not modify this file. Contact an admin of your parent organization if you need changes to this."
placement="top"
>
<Chip
label={"Parent"}
variant="contained"
color="secondary"
style={{display: "table-cell",}}
/>
</Tooltip>
:
<Tooltip
title="Distributed to sub-organizations. This means the sub organizations can use this file, but can not modify it."
placement="top"
>
<Checkbox
disabled={selectedOrganization.creator_org !== undefined && selectedOrganization.creator_org !== null && selectedOrganization.creator_org !== "" ? true : false}
checked={isDistributed}
style={{ }}
color="secondary"
onClick={() => {
setShowDistributionPopup(true)
if(file?.suborg_distribution?.length > 0){
setSelectedSubOrg(file.suborg_distribution)
}else{
setSelectedSubOrg([])
}
setFileIdSelectedForDistribution(file.id)
}}
/>
</Tooltip>
}
</ListItemText>
</ListItem>
);
})
+41 -14
View File
@@ -58,6 +58,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
const navigate = useNavigate();
const {setLeftSideBarOpenByClick, leftSideBarOpenByClick, setSearchBarModalOpen, searchBarModalOpen} = useContext(Context);
const [expandLeftNav, setExpandLeftNav] = useState(false);
const [activeOrgName, setActiveOrgName] = useState(
userdata?.active_org?.name || "Select Organziation"
@@ -261,17 +262,20 @@ useEffect(() => {
},[currentPath]);
useEffect(() => {
UpdateTabStatus();
const expandLeftNav1 = localStorage.getItem("expandLeftNav");
UpdateTabStatus()
const expandLeftNav1 = localStorage.getItem("expandLeftNav")
if (expandLeftNav1 === "false") {
setLeftSideBarOpenByClick(false);
setLeftSideBarOpenByClick(false);
setLeftSideBarOpenByClick(false)
} else {
setLeftSideBarOpenByClick(true);
setLeftSideBarOpenByClick(true);
setExpandLeftNav(true);
const currentLocation = window?.location?.pathname
if (currentLocation?.includes('/workflows/')) {
} else {
setLeftSideBarOpenByClick(true)
setExpandLeftNav(true)
}
}
}, []);
}, [])
const getAvailableWorkflows = useCallback((amount) => {
@@ -533,7 +537,7 @@ useEffect(() => {
<Divider style={{ marginBottom: 10, }} />
<Typography color="textSecondary" align="center" style={{ marginTop: 5, marginBottom: 5, fontSize: 18 }}>
Version: 2.0.0-rc
Version: 2.0.0-rc2
</Typography>
</Menu>
</span>
@@ -591,6 +595,10 @@ useEffect(() => {
org_id: orgId,
};
if (userdata?.active_org?.id === orgId) {
return
}
localStorage.setItem("globalUrl", "");
localStorage.setItem("getting_started_sidebar", "open");
@@ -765,11 +773,18 @@ useEffect(() => {
"UK": "gb"
};
region = regionMapping[region_url] || "gb";
region = regionMapping[region_url] || "eu";
return `https://flagcdn.com/48x36/${region}.png`;
};
useEffect(() => {
if (window?.location?.pathname?.includes("/workflows/")) {
setExpandLeftNav(false);
}
}, [window?.location?.pathname]);
return (
<div
style={{
@@ -786,6 +801,18 @@ useEffect(() => {
zoom: 0.8,
height: "calc((100vh - 32px)*1.2)",
}}
onMouseLeave={() => {
if (window?.location?.pathname?.includes("/workflows/")) {
setExpandLeftNav(false);
}
}}
onMouseOver={() => {
if (window?.location?.pathname?.includes("/workflows/")) {
setExpandLeftNav(true);
}
}
}
>
{modalView}
<Box
@@ -1169,10 +1196,6 @@ useEffect(() => {
}}
style={{
...ButtonStyle,
backgroundColor:
currentOpenTab === "security"
? "#2f2f2f"
: "transparent",
}}
onMouseOver={(event)=>{
event.currentTarget.style.backgroundColor = "#2f2f2f";
@@ -1443,6 +1466,8 @@ useEffect(() => {
</Button>
</Link>
</Box>
{recentworkflows?.length > 0 ?
<Box
style={{
display: "flex",
@@ -1487,6 +1512,8 @@ useEffect(() => {
}) }
</Box>
</Box>
: null }
</Box>
<Box
style={{
File diff suppressed because it is too large Load Diff
+8 -1
View File
@@ -3,11 +3,18 @@ export const Context = createContext();
export const AppContext =(props) => {
const currentLocation = window?.location?.pathname;
// Left side bar global states
const [searchBarModalOpen, setSearchBarModalOpen] = useState(false);
const [leftSideBarOpenByClick, setLeftSideBarOpenByClick] = useState(false);
const [leftSideBarOpenByClick, setLeftSideBarOpenByClick] = useState(currentLocation?.includes('/workflows/') ? false : true)
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
if (currentLocation?.includes('/workflows/') && leftSideBarOpenByClick === true) {
setLeftSideBarOpenByClick(false)
}
}, [leftSideBarOpenByClick])
//Calculate window width
useEffect(() => {
+16 -17
View File
@@ -12,18 +12,18 @@ const Admin2 = (props) => {
const [orgRequest, setOrgRequest] = React.useState(true);
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
const handleGetOrg = (orgId) => {
if (
serverside !== true &&
window.location.search !== undefined &&
window.location.search !== null
) {
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
const foundorgid = params["org_id"];
if (foundorgid !== undefined && foundorgid !== null) {
orgId = foundorgid;
}
}
// if (
// serverside !== true &&
// window.location.search !== undefined &&
// window.location.search !== null
// ) {
// const urlSearchParams = new URLSearchParams(window.location.search);
// const params = Object.fromEntries(urlSearchParams.entries());
// const foundorgid = params["org_id"];
// if (foundorgid !== undefined && foundorgid !== null) {
// orgId = foundorgid;
// }
// }
console.log("getting organization details for: ", orgId);
// if (orgId === undefined) {
@@ -154,16 +154,15 @@ const Admin2 = (props) => {
});
};
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
const foundOrgID = params["org_id"]
useEffect(() => {
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
const foundOrgID = params["org_id"]
if(foundOrgID !== null && foundOrgID !== undefined && userdata?.support && foundOrgID?.length > 0) {
handleClickChangeOrg(foundOrgID)
}
}, [foundOrgID]);
}, [userdata]);
const handleClickChangeOrg = (orgId) => {
// Don't really care about the logout
+17 -11
View File
@@ -399,7 +399,7 @@ const AngularWorkflow = (defaultprops) => {
props.match = {}
props.match.params = params
const { leftSideBarOpenByClick, windowWidth } = useContext(Context)
const { setLeftSideBarOpenByClick, leftSideBarOpenByClick, windowWidth } = useContext(Context)
const [workflowAsCode, setWorkflowAsCode] = useState(false);
var to_be_copied = "";
@@ -8662,6 +8662,9 @@ const releaseToConnectLabel = "Release to Connect"
getApps()
fetchUsecases()
setLeftSideBarOpenByClick(false)
localStorage.setItem("expandLeftNav", false)
const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
// FIXME: Don't check specific one here
@@ -10568,6 +10571,9 @@ const releaseToConnectLabel = "Release to Connect"
const CustomAppHits = connectHits(AppHits)
var shuffleToolsApp = apps.find((app) => app.name === "Shuffle Tools")
if (shuffleToolsApp !== undefined && shuffleToolsApp !== null) {
shuffleToolsApp = JSON.parse(JSON.stringify(shuffleToolsApp))
}
var viewedApps = []
return (
@@ -10620,24 +10626,24 @@ const releaseToConnectLabel = "Release to Connect"
<div style={{
display: "flex",
}}>
<ParsedAppPaper small={true} action={"repeat_back_to_me"} app={JSON.parse(JSON.stringify(shuffleToolsApp))} />
<ParsedAppPaper small={true} action={"repeat_back_to_me"} app={shuffleToolsApp} />
<div style={{marginLeft: 5, }}/>
<ParsedAppPaper small={true} action={"filter_list"} app={JSON.parse(JSON.stringify(shuffleToolsApp))} />
<ParsedAppPaper small={true} action={"filter_list"} app={shuffleToolsApp} />
<div style={{marginLeft: 5, }}/>
<ParsedAppPaper small={true} action={"execute_python"} app={JSON.parse(JSON.stringify(shuffleToolsApp))} />
<ParsedAppPaper small={true} action={"execute_python"} app={shuffleToolsApp} />
<div style={{marginLeft: 5, }}/>
<ParsedAppPaper small={true} action={"parse_ioc"} app={JSON.parse(JSON.stringify(shuffleToolsApp))} />
<ParsedAppPaper small={true} action={"parse_ioc"} app={shuffleToolsApp} />
</div>
<div style={{
display: "flex",
}}>
<ParsedAppPaper small={true} action={"set_cache_value"} app={JSON.parse(JSON.stringify(shuffleToolsApp))} />
<ParsedAppPaper small={true} action={"set_cache_value"} app={shuffleToolsApp} />
<div style={{marginLeft: 5, }}/>
<ParsedAppPaper small={true} action={"get_file_meta"} app={JSON.parse(JSON.stringify(shuffleToolsApp))} />
<ParsedAppPaper small={true} action={"get_file_meta"} app={shuffleToolsApp} />
<div style={{marginLeft: 5, }}/>
<ParsedAppPaper small={true} action={"merge_lists"} app={JSON.parse(JSON.stringify(shuffleToolsApp))} />
<ParsedAppPaper small={true} action={"merge_lists"} app={shuffleToolsApp} />
<div style={{marginLeft: 5, }}/>
<ParsedAppPaper small={true} action={"send_sms_shuffle"} app={JSON.parse(JSON.stringify(shuffleToolsApp))} />
<ParsedAppPaper small={true} action={"send_sms_shuffle"} app={shuffleToolsApp} />
</div>
</div>
: null}
@@ -16242,7 +16248,7 @@ const releaseToConnectLabel = "Release to Connect"
{!distributedFromParent ?
isCorrectOrg ? null :
<Typography variant="body2">
<Typography variant="body2" style={{marginLeft: 10, }}>
<b>Warning</b>: Change <span
style={{color: "#FF8544", cursor: "pointer", pointerEvents: "auto", }}
onClick={() => {
@@ -16313,7 +16319,7 @@ const releaseToConnectLabel = "Release to Connect"
>Active Organization</span> to edit this Workflow.
</Typography>
:
<Typography variant="body2" color="textSecondary">
<Typography variant="body2" color="textSecondary" style={{marginLeft: 10, }}>
Warning: This workflow is controlled by your parent org and may not be editable.
</Typography>
}
+14 -7
View File
@@ -69,6 +69,7 @@ const ApiExplorerWrapper = (props) => {
const [authenticationType, setAuthenticationType] = React.useState("");
const [appAuthentication, setAppAuthentication] = useState([]);
const [selectedMeta, setSelectedMeta] = useState(undefined);
const [appLoaded, setAppLoaded] = useState(false);
const [selectedAction, setSelectedAction] = useState(
{
"app_name": selectedAppData.name,
@@ -258,6 +259,7 @@ const ApiExplorerWrapper = (props) => {
parsedapp.body === undefined ? parsedapp : JSON.parse(parsedapp.body);
setOpenapi(data);
setAppLoaded(true);
};
const handleAppAuthenticationType = (selectedAppData) => {
@@ -773,7 +775,7 @@ const ApiExplorerWrapper = (props) => {
);
};
const skeletonLoader = (
const SkeletonLoader = () => (
<Box
sx={{
display: "flex",
@@ -804,7 +806,7 @@ const ApiExplorerWrapper = (props) => {
<Skeleton variant="text" width="100%" height={40} />
</Stack>
</Box>
<Box
sx={{
display: "flex",
@@ -829,21 +831,21 @@ const ApiExplorerWrapper = (props) => {
}}
>
<Skeleton variant="text" width="100%" height={40} />
<Skeleton
variant="text"
width={100}
height={20}
sx={{ marginTop: 1 }}
/>
<Skeleton
variant="rectangular"
width="100%"
height={30}
sx={{ borderRadius: "8px", marginTop: 1 }}
/>
<Stack
spacing={2}
direction="row"
@@ -858,7 +860,7 @@ const ApiExplorerWrapper = (props) => {
<Skeleton variant="text" width={50} height={30} />
<Skeleton variant="text" width={50} height={30} />
</Stack>
<Skeleton
variant="rectangular"
width="100%"
@@ -891,6 +893,7 @@ const ApiExplorerWrapper = (props) => {
</Box>
</Box>
);
const AuthenticationData = (props) => {
const selectedApp = props.app;
@@ -1756,7 +1759,10 @@ const ApiExplorerWrapper = (props) => {
return (
<Wrapper isLoggedIn={isLoggedIn} isLoaded={isLoaded}>
<Suspense fallback={skeletonLoader}>
{appLoaded === false ? (
<SkeletonLoader />
) : (
<Suspense fallback={SkeletonLoader}>
{authenticationModal}
<ApiExplorer
openapi={openapi}
@@ -1770,6 +1776,7 @@ const ApiExplorerWrapper = (props) => {
isLoaded={isLoaded}
/>
</Suspense>
)}
</Wrapper>
);
};
+5 -3
View File
@@ -5811,9 +5811,11 @@ const AppCreator = (defaultprops) => {
variant="outlined"
color="secondary"
onClick={() => {
var urlParams = new URLSearchParams(window.location.search);
if (!urlParams.has("id")) {
window.open(`/apis/${app.id}`, "_blank")
var urlParams = new URLSearchParams(window.location.search)
if (urlParams.has("id")) {
window.open(`/apis/${urlParams.get("id")}`, "_blank")
} else if (props.match.params.appid !== undefined && props.match.params.appid !== null && props.match.params.appid.length > 0) {
window.open(`/apis/${props.match.params.appid}`, "_blank")
} else {
toast.error("Build the app first.")
}
File diff suppressed because it is too large Load Diff
+16 -12
View File
@@ -716,6 +716,8 @@ const Workflows2 = (props) => {
const [videoViewOpen, setVideoViewOpen] = React.useState(false)
const [gettingStartedItems, setGettingStartedItems] = React.useState([])
const [selectedWorkflowIndexes, setSelectedWorkflowIndexes] = React.useState([])
const [page, setPage] = React.useState(0);
const [pageSize, setPageSize] = React.useState(100);
const [highlightIds, setHighlightIds] = React.useState([])
const [apps, setApps] = React.useState([]);
@@ -751,15 +753,6 @@ const Workflows2 = (props) => {
navigate(`${location.pathname}?${queryParams.toString()}`);
};
useEffect(() => {
if (currTab === 2) {
setIsLoadingPublicWorkflow(true);
// Simulate loading time for the Algolia search results
setTimeout(() => {
setIsLoadingPublicWorkflow(false);
}, 2500);
}
}, [currTab])
@@ -1322,6 +1315,8 @@ const Workflows2 = (props) => {
if (responseJson !== undefined && responseJson !== null) {
if (responseJson.success === false) {
} else if (responseJson.length === 0) {
// When there are no workflows, we can set the loading to false
setIsLoadingWorkflow(false)
if (currTab !== 2) {
toast("No workflows found. Showing workflow discovery")
setCurrTab(2)
@@ -2483,6 +2478,7 @@ const Workflows2 = (props) => {
}
}
return (
<div style={{ width: "100%", minWidth: 320, position: "relative", border: highlightIds.includes(data.id) ? "2px solid #f85a3e" : isDistributed || hasSuborgs ? "2px solid #40E0D0" : "inherit", borderRadius: theme.palette?.borderRadius, backgroundColor: "#212121", fontFamily: theme?.typography?.fontFamily }}>
<Paper square style={paperAppStyle}>
@@ -2537,7 +2533,7 @@ const Workflows2 = (props) => {
maxWidth: 310,
padding: "12px 0",
}}>
{(data?.image !== undefined || data?.image_url !== undefined) ? (
{(data?.image !== undefined || (data?.image_url !== undefined && data?.image_url.length > 0)) ? (
<div style={{
marginBottom: 15,
borderRadius: theme.palette?.borderRadius,
@@ -3371,7 +3367,15 @@ const Workflows2 = (props) => {
className={classes.datagrid}
rows={rows}
columns={columns}
pageSize={100}
page={page}
onPageChange={(newPage) => {
setPage(newPage)
}}
pageSize={pageSize}
onPageSizeChange={(newPageSize) => {
setPageSize(newPageSize);
}}
rowsPerPageOptions={[25, 50, 100, 150]}
checkboxSelection
autoHeight
density="standard"
@@ -3962,7 +3966,7 @@ const Workflows2 = (props) => {
setIsLoadingWorkflow(false);
}
}, [currTab, workflows, userdata, filteredWorkflows])
}, [currTab, workflows, userdata, filteredWorkflows, filters])
+5
View File
@@ -2298,6 +2298,10 @@ func main() {
} else if incRequest.Type == "START_TENZIR" {
log.Printf("[INFO] Got job to start tenzir")
// Manual command = overrides to allow starting of Tenzir from the frontend anyway.
os.Setenv("SHUFFLE_SKIP_PIPELINES", "false")
tenzirDisabled = false
err := deployTenzirNode()
if err != nil {
if strings.Contains(fmt.Sprintf("%s", err), "node available") {
@@ -3456,6 +3460,7 @@ func sendPipelineHealthStatus() (shuffle.LakeConfig, error) {
if (!strings.Contains(err.Error(), "SHUFFLE_SKIP_PIPELINES") && !strings.Contains(err.Error(), "Kubernetes not implemented for Tenzir node")) && !strings.Contains(err.Error(), "Tenzir Node is already running") && !strings.Contains(err.Error(), "docker daemon") {
log.Printf("[ERROR] Tenzir node connection problem: %s", err)
} else {
tenzirDisabled = true
log.Printf("[ERROR] Disabling pipelines: %s. You will need to restart the Orborus to fix this.", err)