[release] v0.12.0-unstable34
This commit is contained in:
parent
5b8622ff57
commit
733745944a
|
@ -8,6 +8,7 @@ import * as API from "../../api";
|
||||||
import RouteSecurity from "./routes/routeSecurity";
|
import RouteSecurity from "./routes/routeSecurity";
|
||||||
import RouteOverview from "./routes/routeoverview";
|
import RouteOverview from "./routes/routeoverview";
|
||||||
import IsLoggedIn from "../../isLoggedIn";
|
import IsLoggedIn from "../../isLoggedIn";
|
||||||
|
import RouteMetrics from "../dashboard/routeMonitoring";
|
||||||
|
|
||||||
const RouteConfigPage = () => {
|
const RouteConfigPage = () => {
|
||||||
const { routeName } = useParams();
|
const { routeName } = useParams();
|
||||||
|
@ -63,6 +64,10 @@ const RouteConfigPage = () => {
|
||||||
config={config}
|
config={config}
|
||||||
/>
|
/>
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Monitoring',
|
||||||
|
children: <RouteMetrics routeName={routeName} />
|
||||||
|
},
|
||||||
]}/>}
|
]}/>}
|
||||||
|
|
||||||
{!config && <div style={{textAlign: 'center'}}>
|
{!config && <div style={{textAlign: 'center'}}>
|
||||||
|
|
|
@ -62,6 +62,9 @@ function descendingComparator(a, b, orderBy) {
|
||||||
if(orderBy != 'name') {
|
if(orderBy != 'name') {
|
||||||
a1 = parseFloat(a["__" + orderBy]);
|
a1 = parseFloat(a["__" + orderBy]);
|
||||||
b1 = parseFloat(b["__" + orderBy]);
|
b1 = parseFloat(b["__" + orderBy]);
|
||||||
|
} else {
|
||||||
|
a1 = a1.toLowerCase();
|
||||||
|
b1 = b1.toLowerCase();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (b1 < a1) {
|
if (b1 < a1) {
|
||||||
|
|
|
@ -175,7 +175,7 @@ const ContainerMetrics = ({containerName}) => {
|
||||||
</Box>}
|
</Box>}
|
||||||
{metrics && <div style={{zIndex:2, position: 'relative'}}>
|
{metrics && <div style={{zIndex:2, position: 'relative'}}>
|
||||||
<Grid container rowSpacing={4.5} columnSpacing={2.75} >
|
<Grid container rowSpacing={4.5} columnSpacing={2.75} >
|
||||||
<Grid item xs={12} sx={{ mb: -2.25 }}>
|
<Grid item xs={12} xl={8} sx={{ mb: -2.25 }}>
|
||||||
<Typography variant="h4">{containerName} Monitoring</Typography>
|
<Typography variant="h4">{containerName} Monitoring</Typography>
|
||||||
<Stack direction="row" alignItems="center" spacing={0} style={{marginTop: 10}}>
|
<Stack direction="row" alignItems="center" spacing={0} style={{marginTop: 10}}>
|
||||||
<Button
|
<Button
|
||||||
|
@ -218,11 +218,11 @@ const ContainerMetrics = ({containerName}) => {
|
||||||
</Stack>
|
</Stack>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Grid item xs={12}>
|
<Grid item xs={12} xl={8}>
|
||||||
<PlotComponent xAxis={xAxis} zoom={zoom} setZoom={setZoom} slot={slot} title={'Resources'} data={[metrics[metricsKey.CPU], metrics[metricsKey.RAM]]}/>
|
<PlotComponent xAxis={xAxis} zoom={zoom} setZoom={setZoom} slot={slot} title={'Resources'} data={[metrics[metricsKey.CPU], metrics[metricsKey.RAM]]}/>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Grid item xs={12}>
|
<Grid item xs={12} xl={8}>
|
||||||
<PlotComponent xAxis={xAxis} zoom={zoom} setZoom={setZoom} slot={slot} title={'Network'} data={[metrics[metricsKey.NET_TX], metrics[metricsKey.NET_RX]]}/>
|
<PlotComponent xAxis={xAxis} zoom={zoom} setZoom={setZoom} slot={slot} title={'Network'} data={[metrics[metricsKey.NET_TX], metrics[metricsKey.NET_RX]]}/>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
219
client/src/pages/dashboard/routeMonitoring.jsx
Normal file
219
client/src/pages/dashboard/routeMonitoring.jsx
Normal file
|
@ -0,0 +1,219 @@
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
// material-ui
|
||||||
|
import {
|
||||||
|
Avatar,
|
||||||
|
AvatarGroup,
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Grid,
|
||||||
|
List,
|
||||||
|
ListItemAvatar,
|
||||||
|
ListItemButton,
|
||||||
|
ListItemSecondaryAction,
|
||||||
|
ListItemText,
|
||||||
|
MenuItem,
|
||||||
|
Stack,
|
||||||
|
TextField,
|
||||||
|
Typography,
|
||||||
|
Alert,
|
||||||
|
LinearProgress,
|
||||||
|
CircularProgress
|
||||||
|
} from '@mui/material';
|
||||||
|
|
||||||
|
import IsLoggedIn from '../../isLoggedIn';
|
||||||
|
|
||||||
|
import * as API from '../../api';
|
||||||
|
import AnimateButton from '../../components/@extended/AnimateButton';
|
||||||
|
import PlotComponent from './components/plot';
|
||||||
|
import TableComponent from './components/table';
|
||||||
|
import { HomeBackground, TransparentHeader } from '../home';
|
||||||
|
import { formatDate } from './components/utils';
|
||||||
|
|
||||||
|
// avatar style
|
||||||
|
const avatarSX = {
|
||||||
|
width: 36,
|
||||||
|
height: 36,
|
||||||
|
fontSize: '1rem'
|
||||||
|
};
|
||||||
|
|
||||||
|
// action style
|
||||||
|
const actionSX = {
|
||||||
|
mt: 0.75,
|
||||||
|
ml: 1,
|
||||||
|
top: 'auto',
|
||||||
|
right: 'auto',
|
||||||
|
alignSelf: 'flex-start',
|
||||||
|
transform: 'none'
|
||||||
|
};
|
||||||
|
|
||||||
|
// sales report status
|
||||||
|
const status = [
|
||||||
|
{
|
||||||
|
value: 'today',
|
||||||
|
label: 'Today'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'month',
|
||||||
|
label: 'This Month'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'year',
|
||||||
|
label: 'This Year'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// ==============================|| DASHBOARD - DEFAULT ||============================== //
|
||||||
|
|
||||||
|
const RouteMetrics = ({routeName}) => {
|
||||||
|
const [value, setValue] = useState('today');
|
||||||
|
const [slot, setSlot] = useState('latest');
|
||||||
|
|
||||||
|
const [zoom, setZoom] = useState({
|
||||||
|
xaxis: {}
|
||||||
|
});
|
||||||
|
|
||||||
|
const [coStatus, setCoStatus] = useState(null);
|
||||||
|
const [metrics, setMetrics] = useState(null);
|
||||||
|
const [isCreatingDB, setIsCreatingDB] = useState(false);
|
||||||
|
|
||||||
|
const resetZoom = () => {
|
||||||
|
setZoom({
|
||||||
|
xaxis: {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const metricsKey = {
|
||||||
|
SUCCESS: "cosmos.proxy.route.success." + routeName,
|
||||||
|
ERROR: "cosmos.proxy.route.error." + routeName,
|
||||||
|
TIME: "cosmos.proxy.route.time." + routeName,
|
||||||
|
BYTES: "cosmos.proxy.route.bytes." + routeName,
|
||||||
|
};
|
||||||
|
|
||||||
|
const refreshMetrics = () => {
|
||||||
|
API.metrics.get([
|
||||||
|
"cosmos.proxy.route.success",
|
||||||
|
"cosmos.proxy.route.error",
|
||||||
|
"cosmos.proxy.route.time",
|
||||||
|
"cosmos.proxy.route.bytes",
|
||||||
|
].map(c => c + "." + routeName)).then((res) => {
|
||||||
|
let finalMetrics = {};
|
||||||
|
if(res.data) {
|
||||||
|
res.data.forEach((metric) => {
|
||||||
|
finalMetrics[metric.Key] = metric;
|
||||||
|
});
|
||||||
|
setMetrics(finalMetrics);
|
||||||
|
}
|
||||||
|
setTimeout(refreshMetrics, 10000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const refreshStatus = () => {
|
||||||
|
API.getStatus().then((res) => {
|
||||||
|
setCoStatus(res.data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
refreshStatus();
|
||||||
|
refreshMetrics();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
let xAxis = [];
|
||||||
|
|
||||||
|
if(slot === 'latest') {
|
||||||
|
for(let i = 0; i < 100; i++) {
|
||||||
|
xAxis.unshift(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(slot === 'hourly') {
|
||||||
|
for(let i = 0; i < 48; i++) {
|
||||||
|
let now = new Date();
|
||||||
|
now.setHours(now.getHours() - i);
|
||||||
|
now.setMinutes(0);
|
||||||
|
now.setSeconds(0);
|
||||||
|
xAxis.unshift(formatDate(now, true));
|
||||||
|
}
|
||||||
|
} else if(slot === 'daily') {
|
||||||
|
for(let i = 0; i < 30; i++) {
|
||||||
|
let now = new Date();
|
||||||
|
now.setDate(now.getDate() - i);
|
||||||
|
xAxis.unshift(formatDate(now));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<IsLoggedIn />
|
||||||
|
{!metrics && <Box style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
zIndex: 1000,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginTop: '150px',
|
||||||
|
}}>
|
||||||
|
<CircularProgress
|
||||||
|
size={100}
|
||||||
|
/>
|
||||||
|
</Box>}
|
||||||
|
{metrics && <div style={{zIndex:2, position: 'relative'}}>
|
||||||
|
<Grid container rowSpacing={4.5} columnSpacing={2.75} >
|
||||||
|
<Grid item xs={12} xl={8} sx={{ mb: -2.25 }}>
|
||||||
|
<Typography variant="h4">{routeName} Monitoring</Typography>
|
||||||
|
<Stack direction="row" alignItems="center" spacing={0} style={{marginTop: 10}}>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
onClick={() => {setSlot('latest'); resetZoom()}}
|
||||||
|
color={slot === 'latest' ? 'primary' : 'secondary'}
|
||||||
|
variant={slot === 'latest' ? 'outlined' : 'text'}
|
||||||
|
>
|
||||||
|
Latest
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
onClick={() => {setSlot('hourly'); resetZoom()}}
|
||||||
|
color={slot === 'hourly' ? 'primary' : 'secondary'}
|
||||||
|
variant={slot === 'hourly' ? 'outlined' : 'text'}
|
||||||
|
>
|
||||||
|
Hourly
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
onClick={() => {setSlot('daily'); resetZoom()}}
|
||||||
|
color={slot === 'daily' ? 'primary' : 'secondary'}
|
||||||
|
variant={slot === 'daily' ? 'outlined' : 'text'}
|
||||||
|
>
|
||||||
|
Daily
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{zoom.xaxis.min && <Button
|
||||||
|
size="small"
|
||||||
|
onClick={() => {
|
||||||
|
setZoom({
|
||||||
|
xaxis: {}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
color={'primary'}
|
||||||
|
variant={'outlined'}
|
||||||
|
>
|
||||||
|
Reset Zoom
|
||||||
|
</Button>}
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12} xl={8}>
|
||||||
|
<PlotComponent xAxis={xAxis} zoom={zoom} setZoom={setZoom} slot={slot} title={'Requests'} data={[metrics[metricsKey.SUCCESS], metrics[metricsKey.ERROR]]}/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12} xl={8}>
|
||||||
|
<PlotComponent xAxis={xAxis} zoom={zoom} setZoom={setZoom} slot={slot} title={'Resources'} data={[metrics[metricsKey.TIME], metrics[metricsKey.BYTES]]}/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</div>}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RouteMetrics;
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "cosmos-server",
|
"name": "cosmos-server",
|
||||||
"version": "0.12.0-unstable33",
|
"version": "0.12.0-unstable34",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "test-server.js",
|
"main": "test-server.js",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
|
|
Loading…
Reference in a new issue