marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding pipelines to the ui

Browse Source
This commit is contained in:
Hari Krishna
2024-04-29 07:35:37 +00:00
parent 080f30aecd
commit 1c97e67855
1 changed files with 327 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Admin.jsx
+327 -205
View File
@@ -203,7 +203,7 @@ const Admin = (props) => {
const [selectedStatus, setSelectedStatus] = React.useState([]); const [selectedStatus, setSelectedStatus] = React.useState([]);
const [webHooks, setWebHooks] = React.useState([]); const [webHooks, setWebHooks] = React.useState([]);
const [allSchedules, setAllSchedules] = React.useState([]); const [allSchedules, setAllSchedules] = React.useState([]);
const [pipelines, setPipelines] = React.useState([]);
const [, forceUpdate] = React.useState(); const [, forceUpdate] = React.useState();
const [showDeleteAccountTextbox, setShowDeleteAccountTextbox] = const [showDeleteAccountTextbox, setShowDeleteAccountTextbox] =
@@ -756,6 +756,7 @@ If you're interested, please let me know a time that works for you, or set up a
.then((responseJson) => { .then((responseJson) => {
setWebHooks(responseJson.webhooks || []); // Handling the case where the result is null or undefined setWebHooks(responseJson.webhooks || []); // Handling the case where the result is null or undefined
setAllSchedules(responseJson.schedules || []); setAllSchedules(responseJson.schedules || []);
setPipelines(responseJson.pipelines || []);
}) })
.catch((error) => { .catch((error) => {
toast(error.toString()); toast(error.toString());
@@ -933,6 +934,14 @@ If you're interested, please let me know a time that works for you, or set up a
}); });
}; };
const changePipelineState = (pipeline, state) => {
if (state.trim() === ''){
toast("state is not defined")
return
}
}
if ( if (
userdata.support === true && userdata.support === true &&
selectedOrganization.id !== "" && selectedOrganization.id !== "" &&
@@ -4573,94 +4582,112 @@ If you're interested, please let me know a time that works for you, or set up a
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
}} }}
/> />
<List> {allSchedules === undefined ||
<ListItem> allSchedules === null ||
<ListItemText allSchedules.length === 0 ? (
primary="Interval" <div
style={{ maxWidth: 200, minWidth: 200 }} style={{
/> textAlign: "center",
<ListItemText padding: "20px",
primary="Environment" backgroundColor: "#f0f0f0",
style={{ maxWidth: 150, minWidth: 150 }} color: "#666",
/> borderRadius: "5px",
<ListItemText }}
primary="Workflow" >
style={{ maxWidth: 315, minWidth: 315 }} No schedules found.
/> </div>
<ListItemText ) : (
primary="Argument" <List>
style={{ minWidth: 300, maxWidth: 300, overflow: "hidden" }} <ListItem>
/> <ListItemText
<ListItemText primary="Actions" /> primary="Interval"
<ListItemText primary="Delegation" /> style={{ maxWidth: 200, minWidth: 200 }}
</ListItem> />
{allSchedules === undefined || allSchedules === null <ListItemText
? null primary="Environment"
: allSchedules.map((schedule, index) => { style={{ maxWidth: 150, minWidth: 150 }}
var bgColor = "#27292d"; />
if (index % 2 === 0) { <ListItemText
bgColor = "#1f2023"; primary="Workflow"
} style={{ maxWidth: 315, minWidth: 315 }}
/>
<ListItemText
primary="Argument"
style={{ minWidth: 300, maxWidth: 300, overflow: "hidden" }}
/>
<ListItemText primary="Actions" />
<ListItemText primary="Delegation" />
</ListItem>
{ allSchedules.map((schedule, index) => {
var bgColor = "#27292d";
if (index % 2 === 0) {
bgColor = "#1f2023";
}
return ( return (
<ListItem key={index} style={{ backgroundColor: bgColor }}> <ListItem key={index} style={{ backgroundColor: bgColor }}>
<ListItemText <ListItemText
style={{ maxWidth: 200, minWidth: 200 }} style={{ maxWidth: 200, minWidth: 200 }}
primary={ primary={
schedule.environment === "cloud" || schedule.environment === "cloud" ||
schedule.environment === "" || schedule.environment === "" ||
schedule.frequency.length > 0 ? ( schedule.frequency.length > 0 ? (
schedule.frequency schedule.frequency
) : ( ) : (
<span>{schedule.seconds} seconds</span> <span>{schedule.seconds} seconds</span>
) )
} }
/> />
<ListItemText <ListItemText
style={{ maxWidth: 150, minWidth: 150 }} style={{ maxWidth: 150, minWidth: 150 }}
primary={schedule.environment} primary={schedule.environment}
/> />
<ListItemText <ListItemText
style={{ maxWidth: 315, minWidth: 315 }} style={{ maxWidth: 315, minWidth: 315 }}
primary={ primary={
<a <a
style={{ textDecoration: "none", color: "#f85a3e" }} style={{ textDecoration: "none", color: "#f85a3e" }}
href={`/workflows/${schedule.workflow_id}`} href={`/workflows/${schedule.workflow_id}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
{schedule.workflow_id} {schedule.workflow_id}
</a> </a>
} }
/> />
<ListItemText <ListItemText
primary={schedule.wrapped_argument.replaceAll('\\"', '"')} primary={schedule.wrapped_argument.replaceAll('\\"', '"')}
style={{ style={{
minWidth: 300, minWidth: 300,
maxWidth: 300, maxWidth: 300,
overflow: "hidden", overflow: "hidden",
}}
/>
<ListItemText>
<Button
style={{}}
variant = {schedule.status === "running" ? "contained" : "outlined"}
disabled={schedule.status === "uninitialized"}
onClick={() => {
if (schedule.status === "running") {
deleteSchedule(schedule);
} else startSchedule(schedule);
}} }}
> />
{schedule.status === "running" <ListItemText>
? "Stop Schedule" <Button
style={{}}
variant={
schedule.status === "running"
? "contained"
: "outlined"
}
disabled={schedule.status === "uninitialized"}
onClick={() => {
if (schedule.status === "running") {
deleteSchedule(schedule);
} else startSchedule(schedule);
}}
>
{schedule.status === "running"
? "Stop Schedule"
: "Start Schedule"} : "Start Schedule"}
</Button> </Button>
</ListItemText> </ListItemText>
</ListItem> </ListItem>
); );
})} })}
</List> </List>
)}
<div style={{ marginTop: 20, marginBottom: 20 }}> <div style={{ marginTop: 20, marginBottom: 20 }}>
<h2 style={{ display: "inline" }}>WebHooks</h2> <h2 style={{ display: "inline" }}>WebHooks</h2>
@@ -4673,126 +4700,140 @@ If you're interested, please let me know a time that works for you, or set up a
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
}} }}
/> />
{webHooks === undefined || webHooks === null || webHooks.length === 0 ? (
<div
style={{
textAlign: "center",
padding: "20px",
backgroundColor: "#f0f0f0",
color: "#666",
borderRadius: "5px",
}}
>
No webhooks found.
</div>
) : (
<List>
<ListItem>
<ListItemText
primary="Name"
style={{ maxWidth: 200, minWidth: 200 }}
/>
<ListItemText
primary="Environment"
style={{ maxWidth: 150, minWidth: 150 }}
/>
<ListItemText
primary="Workflow"
style={{ maxWidth: 315, minWidth: 315 }}
/>
<ListItemText
primary="Url"
style={{ minWidth: 300, maxWidth: 300, overflow: "hidden" }}
/>
<ListItemText primary="Actions" />
</ListItem>
{webHooks.map((webhook, index) => {
var bgColor = "#27292d";
if (index % 2 === 0) {
bgColor = "#1f2023";
}
<List> return (
<ListItem> <ListItem key={index} style={{ backgroundColor: bgColor }}>
<ListItemText primary="Name" style={{ maxWidth: 200, minWidth: 200 }} /> <ListItemText
<ListItemText style={{ maxWidth: 200, minWidth: 200 }}
primary="Environment" primary={webhook.info.name}
style={{ maxWidth: 150, minWidth: 150 }} />
/> <ListItemText
<ListItemText style={{ maxWidth: 150, minWidth: 150 }}
primary="Workflow" primary={webhook.environment}
style={{ maxWidth: 315, minWidth: 315 }} />
/> <ListItemText
<ListItemText style={{ maxWidth: 315, minWidth: 315 }}
primary="Url" primary={
style={{ minWidth: 300, maxWidth: 300, overflow: "hidden" }} <a
/> style={{ textDecoration: "none", color: "#f85a3e" }}
<ListItemText href={`/workflows/${webhook.workflows[0]}`}
primary="Actions" target="_blank"
/> rel="noopener noreferrer"
</ListItem>
{webHooks === undefined || webHooks === null
? null
: webHooks.map((webhook, index) => {
var bgColor = "#27292d";
if (index % 2 === 0) {
bgColor = "#1f2023";
}
return (
<ListItem key={index} style={{ backgroundColor: bgColor }}>
<ListItemText
style={{ maxWidth: 200, minWidth: 200 }}
primary={webhook.info.name}
/>
<ListItemText
style={{ maxWidth: 150, minWidth: 150 }}
primary={webhook.environment}
/>
<ListItemText
style={{ maxWidth: 315, minWidth: 315 }}
primary={
<a
style={{ textDecoration: "none", color: "#f85a3e" }}
href={`/workflows/${webhook.workflows[0]}`}
target="_blank"
rel="noopener noreferrer"
>
{webhook.workflows[0]}
</a>
}
/>
<ListItemText
style={{ marginLeft: 10, maxWidth: 100, minWidth: 100 }}
primary={
webhook.info.url === undefined || webhook.info.url === 0 ? (
""
) : (
<Tooltip
title={"Copy URL"}
style={{}}
aria-label={"Copy URL"}
>
<IconButton
style={{}}
onClick={() => {
const elementName = "copy_element_shuffle";
var copyText = document.getElementById(elementName);
if (copyText !== null && copyText !== undefined) {
const clipboard = navigator.clipboard;
if (clipboard === undefined) {
toast("Can only copy over HTTPS (port 3443)");
return;
}
navigator.clipboard.writeText(webhook.info.url);
copyText.select();
copyText.setSelectionRange(
0,
99999,
); /* For mobile devices */
/* Copy the text inside the text field */
document.execCommand("copy");
toast("URL copied to clipboard");
}
}}
>
<FileCopyIcon
style={{ color: "rgba(255,255,255,0.8)" }}
/>
</IconButton>
</Tooltip>
)
}
/>
<ListItemText>
<Button
style={{ marginLeft: '18%' }}
variant={webhook.status === "running" ? "contained" : "outlined"}
disabled={webhook.status === "uninitialized"}
onClick={() => {
if (webhook.status === "running") {
deleteWebhook(webhook);
} else startWebHook(webhook);
}}
> >
{webhook.status === "running" {webhook.workflows[0]}
? "Stop webhook" </a>
: "Start Webhook"} }
</Button> />
</ListItemText>
</ListItem>
);
})}
</List>
{/* <div style={{ marginTop: 20, marginBottom: 20 }}> <ListItemText
style={{ marginLeft: 10, maxWidth: 100, minWidth: 100 }}
primary={
webhook.info.url === undefined || webhook.info.url === 0 ? (
""
) : (
<Tooltip
title={"Copy URL"}
style={{}}
aria-label={"Copy URL"}
>
<IconButton
style={{}}
onClick={() => {
const elementName = "copy_element_shuffle";
var copyText = document.getElementById(elementName);
if (copyText !== null && copyText !== undefined) {
const clipboard = navigator.clipboard;
if (clipboard === undefined) {
toast("Can only copy over HTTPS (port 3443)");
return;
}
navigator.clipboard.writeText(webhook.info.url);
copyText.select();
copyText.setSelectionRange(
0,
99999,
); /* For mobile devices */
/* Copy the text inside the text field */
document.execCommand("copy");
toast("URL copied to clipboard");
}
}}
>
<FileCopyIcon
style={{ color: "rgba(255,255,255,0.8)" }}
/>
</IconButton>
</Tooltip>
)
}
/>
<ListItemText>
<Button
style={{ marginLeft: "18%" }}
variant={
webhook.status === "running" ? "contained" : "outlined"
}
disabled={webhook.status === "uninitialized"}
onClick={() => {
if (webhook.status === "running") {
deleteWebhook(webhook);
} else startWebHook(webhook);
}}
>
{webhook.status === "running"
? "Stop webhook"
: "Start Webhook"}
</Button>
</ListItemText>
</ListItem>
);
})}
</List>
)}
<div style={{ marginTop: 20, marginBottom: 20 }}>
<h2 style={{ display: "inline" }}>Tenzir Pipelines</h2> <h2 style={{ display: "inline" }}>Tenzir Pipelines</h2>
<span style={{ marginLeft: 25 }}> <span style={{ marginLeft: 25 }}>
Controls a pipeline to run things.{" "} Controls a pipeline to run things.{" "}
@@ -4813,9 +4854,90 @@ If you're interested, please let me know a time that works for you, or set up a
marginBottom: 20, marginBottom: 20,
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
}} }}
/> */} />
{pipelines === undefined || pipelines === null || pipelines.length === 0 ? (
<div
style={{
textAlign: "center",
padding: "20px",
backgroundColor: "#f0f0f0",
color: "#666",
borderRadius: "5px",
}}
>
No pipelines found.
</div>
) : (
<List>
<ListItem>
<ListItemText
primary="Name"
style={{ maxWidth: 200, minWidth: 200 }}
/>
<ListItemText
primary="Environment"
style={{ maxWidth: 150, minWidth: 150 }}
/>
<ListItemText
primary="Workflow"
style={{ maxWidth: 315, minWidth: 315 }}
/>
<ListItemText primary="Actions" />
</ListItem>
{pipelines.map((pipeline, index) => {
var bgColor = "#27292d";
if (index % 2 === 0) {
bgColor = "#1f2023";
}
return (
<ListItem key={index} style={{ backgroundColor: bgColor }}>
<ListItemText
style={{ maxWidth: 200, minWidth: 200 }}
primary={pipeline.name}
/>
<ListItemText
style={{ maxWidth: 150, minWidth: 150 }}
primary={pipeline.environment}
/>
<ListItemText
style={{ maxWidth: 315, minWidth: 315 }}
primary={
<a
style={{ textDecoration: "none", color: "#f85a3e" }}
href={`/workflows/${pipeline.workflow_id}`}
target="_blank"
rel="noopener noreferrer"
>
{pipeline.workflow_id}
</a>
}
/>
<ListItemText>
<Button
style={{ marginLeft: "18%" }}
variant={
pipeline.status === "running" ? "contained" : "outlined"
}
disabled={pipeline.status === "uninitialized"}
onClick={() => {
if (pipeline.status === "running") {
changePipelineState(pipeline, "stop");
} else changePipelineState(pipeline, "start");
}}
>
{pipeline.status === "running"
? "Stop webhook"
: "Start Webhook"}
</Button>
</ListItemText>
</ListItem>
);
})}
</List>
)}
</div> </div>
) : null; ) : null;
const appCategoryView = const appCategoryView =
curTab === 8 ? ( curTab === 8 ? (