123 lines
2.8 KiB
JavaScript
123 lines
2.8 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import ExclamationTriangle from '@heroicons/react/24/solid/ExclamationTriangleIcon';
|
|
import Signal from '@heroicons/react/24/solid/SignalIcon';
|
|
import Image from 'next/image';
|
|
import {
|
|
Avatar,
|
|
Box,
|
|
Card,
|
|
CardContent,
|
|
LinearProgress,
|
|
Stack,
|
|
SvgIcon,
|
|
Typography
|
|
} from '@mui/material';
|
|
|
|
|
|
export const OverviewTasksProgress = (props) => {
|
|
var { value, mtp, sx, type } = props;
|
|
var valueRaw;
|
|
if( value !== undefined) {
|
|
valueRaw = value.substring(1);
|
|
console.log("rtt:", valueRaw)
|
|
}
|
|
|
|
const formatMilliseconds = (timeString) => {
|
|
|
|
if (timeString === "") {
|
|
return "";
|
|
}
|
|
// Regular expression to extract value and unit
|
|
const regex = /^(\d+(\.\d+)?)\s*([mµ]?s|s)?$/;
|
|
|
|
// Extract value and unit
|
|
const matches = timeString.match(regex);
|
|
if (!matches) {
|
|
return "Invalid time format";
|
|
}
|
|
|
|
let value = parseFloat(matches[1]);
|
|
const unit = matches[3] || "ms";
|
|
|
|
// Convert units to milliseconds
|
|
switch (unit) {
|
|
case "s":
|
|
value *= 1000;
|
|
break;
|
|
case "µs":
|
|
value /= 1000;
|
|
break;
|
|
default:
|
|
// For "ms", do nothing
|
|
break;
|
|
}
|
|
|
|
// Round the number to two decimal places
|
|
const roundedValue = value.toFixed(2);
|
|
|
|
return `${roundedValue}ms`;
|
|
}
|
|
|
|
const showIcon = (mtpType) => {
|
|
if (valueRaw === "") {
|
|
return <SvgIcon><ExclamationTriangle></ExclamationTriangle></SvgIcon>
|
|
}
|
|
switch (mtpType) {
|
|
case "mqtt":
|
|
return <SvgIcon><Signal/></SvgIcon>
|
|
case "stomp":
|
|
return <Image src="/assets/mtp/boot-stomp.svg" alt="STOMP" width={24} height={24} />;
|
|
case "websocket":
|
|
return <Image src="/assets/mtp/websocket.svg" alt="WebSocket" width={24} height={24} />;
|
|
default:
|
|
return <ExclamationTriangle />;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card sx={sx}>
|
|
<CardContent>
|
|
<Stack
|
|
alignItems="flex-start"
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
spacing={3}
|
|
>
|
|
<Stack spacing={1}>
|
|
<Typography
|
|
color="sucess.main"
|
|
gutterBottom
|
|
variant="overline"
|
|
>
|
|
{mtp}
|
|
</Typography>
|
|
<Typography variant="h4">
|
|
{formatMilliseconds(valueRaw)}
|
|
</Typography>
|
|
</Stack>
|
|
<Avatar
|
|
sx={{
|
|
backgroundColor: '#f28950',
|
|
height: 56,
|
|
width: 56
|
|
}}
|
|
>
|
|
{showIcon(type)}
|
|
</Avatar>
|
|
</Stack>
|
|
<Box sx={{ mt: 3 }}>
|
|
<LinearProgress
|
|
value={valueRaw ? 80 : 0}
|
|
variant="determinate"
|
|
/>
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
OverviewTasksProgress.propTypes = {
|
|
value: PropTypes.string.isRequired,
|
|
sx: PropTypes.object
|
|
};
|