124 lines
3.7 KiB
JavaScript
124 lines
3.7 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import moment from "moment";
|
|
import CircularProgress from "@mui/material/CircularProgress";
|
|
import Typography from "@mui/material/Typography";
|
|
import Button from "@mui/material/Button";
|
|
import Box from "@mui/material/Box";
|
|
|
|
const happyGreen = "#64dd17";
|
|
const happyGrey = "#e0e0e0";
|
|
export default function PipelineTriggerWidget(props) {
|
|
const { trigger, close } = props;
|
|
const [time, setTime] = useState(Date.now());
|
|
const [hovering, setHovering] = useState(false);
|
|
const hoverStop = () => setHovering(false);
|
|
const hoverStart = () => setHovering(true);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => setTime(Date.now()), 200);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
function runNow() {
|
|
close();
|
|
if (!trigger.launchTrigger) return;
|
|
trigger.launchTrigger();
|
|
}
|
|
|
|
function triggerMomentRemaining() {
|
|
if (!trigger || !trigger.triggerAt) return null;
|
|
const now = moment();
|
|
const diff = moment(trigger.triggerAt.diff(now)).valueOf();
|
|
const timeString = new Date(diff).toISOString().substring(11, 19);
|
|
return timeString; // .split(":").filter((s) => s != "00").join(":");
|
|
}
|
|
const normalizeValue = () => {
|
|
const { triggerQueued: start, triggerAt: end } = trigger;
|
|
const total = end - start;
|
|
// TODO The below line causes issues because close is called during a render.
|
|
// This causes MASSIVE issues, and needs to be resolved
|
|
//if (((trigger.triggerAt - Date.now()) / total) * 100 > 100) return close();
|
|
return ((total - (trigger.triggerAt - Date.now())) / total) * 100;
|
|
};
|
|
return (
|
|
<Box sx={{ display: "flex" }}>
|
|
<Box
|
|
sx={{
|
|
position: "relative",
|
|
display: "inline-flex",
|
|
backgroundColor: hovering ? happyGreen : "white",
|
|
borderRadius: "50%",
|
|
padding: 0.5,
|
|
margin: "auto",
|
|
}}
|
|
onMouseEnter={hoverStart}
|
|
onMouseLeave={hoverStop}
|
|
>
|
|
<CircularProgress
|
|
size="8rem"
|
|
variant="determinate"
|
|
sx={{ color: happyGrey, position: "absolute" }}
|
|
thickness={2.5}
|
|
value={100}
|
|
/>
|
|
<CircularProgress
|
|
size="8rem"
|
|
variant="determinate"
|
|
sx={{ color: hovering ? "gray" : happyGreen }}
|
|
thickness={2.5}
|
|
value={normalizeValue()}
|
|
/>
|
|
|
|
<Box
|
|
sx={{
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
position: "absolute",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
color: "white",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="caption"
|
|
component="div"
|
|
color="black"
|
|
sx={{
|
|
// fontWeight: "bold",
|
|
cursor: !hovering ? "inherit" : "pointer",
|
|
}}
|
|
>
|
|
{!hovering && triggerMomentRemaining()}
|
|
{hovering && (
|
|
<React.Fragment>
|
|
<Button
|
|
component="div"
|
|
sx={{ color: "white", fontWeight: "bold" }}
|
|
onClick={runNow}
|
|
>
|
|
Run Now
|
|
</Button>
|
|
<Typography
|
|
variant="caption"
|
|
component="div"
|
|
color="white"
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
{triggerMomentRemaining()}
|
|
</Typography>
|
|
</React.Fragment>
|
|
)}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|