salehsulieman/AyposWeb
1
0
Fork 0
forked from BLC/AyposWeb
Code Pull Requests Actions Activity

Fix typescript build issues

Browse Source
This commit is contained in:
server
2025-08-03 19:36:55 +00:00
parent b264c6d5a4
commit e052afde3d
4 changed files with 164 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Migration/ResourceDistributionChart.tsx
View File

@@ -9,6 +9,8 @@ import {
PointElement,
LineElement,
BarElement,
BarController,
LineController,
Title,
Tooltip,
Legend,
@@ -22,6 +24,8 @@ ChartJS.register(
PointElement,
LineElement,
BarElement,
BarController,
LineController,
Title,
Tooltip,
Legend
@@ -140,7 +144,7 @@ const ResourceDistributionChart: React.FC<ResourceDistributionChartProps> = ({
titleFont: {
family: theme.typography.fontFamily,
size: 13,
weight: '600'
weight: 600
},
bodyColor: theme.palette.text.secondary,
bodyFont: {
@@ -176,7 +180,7 @@ const ResourceDistributionChart: React.FC<ResourceDistributionChartProps> = ({
font: {
family: theme.typography.fontFamily,
size: 12,
weight: '500'
weight: 500
}
},
beginAtZero: true,
@@ -204,7 +208,7 @@ const ResourceDistributionChart: React.FC<ResourceDistributionChartProps> = ({
font: {
family: theme.typography.fontFamily,
size: 12,
weight: '500'
weight: 500
}
},
beginAtZero: true,

4
src/components/Migration/SummaryStats.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback } from 'react';
import React, {useCallback } from 'react';
import { Grid, Paper, Typography, Box, Divider } from '@mui/material';
import StorageIcon from '@mui/icons-material/Storage';
import ComputerIcon from '@mui/icons-material/Computer';
@@ -19,7 +19,7 @@ const SummaryStats: React.FC = () => {
return jsonData;
}, []);
const { data, pollingInterval } = useSmartPolling<VMPlacementData>(
const { data } = useSmartPolling<VMPlacementData>(
fetchData,
null,
5000, // min interval: 5 seconds

2
src/pages/Maintenance.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { Box, Paper, Typography, Fade, useTheme, AppBar, Toolbar, Chip, Slider, FormControlLabel, Switch } from '@mui/material';
import { Box, Paper, Typography, Fade, useTheme, AppBar, Toolbar, Chip, Slider} from '@mui/material';
import {
Chart as ChartJS,
CategoryScale,

308
src/pages/Migration.tsx
View File

@@ -25,7 +25,7 @@ import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import TerminalIcon from '@mui/icons-material/Terminal';
import VisibilityIcon from '@mui/icons-material/Visibility';
import LockIcon from '@mui/icons-material/Lock';
//import LockIcon from '@mui/icons-material/Lock';
import SummaryStats from '../components/Migration/SummaryStats';
import ResourceDistributionChart from '../components/Migration/ResourceDistributionChart';
@@ -37,163 +37,163 @@ import { VMPlacementData } from '../components/Migration/types';
// Constants
const API_BASE_URL = config.apiUrl;
const REFRESH_INTERVAL = 30000; // 30 seconds
//const REFRESH_INTERVAL = 30000; // 30 seconds
interface VMCardProps {
vm: {
name: string;
power: number;
status: 'blocked' | 'open';
confg: {
cpu: number;
ram: number;
disk: number;
};
};
vmId: string;
isActive: boolean;
expandedVMs: Record<string, boolean>;
toggleVMDetails: (vmId: string) => void;
theme: any;
}
// interface VMCardProps {
// vm: {
// name: string;
// power: number;
// status: 'blocked' | 'open';
// confg: {
// cpu: number;
// ram: number;
// disk: number;
// };
// };
// vmId: string;
// isActive: boolean;
// expandedVMs: Record<string, boolean>;
// toggleVMDetails: (vmId: string) => void;
// theme: any;
// }
const VMCard = ({ vm, vmId, isActive, expandedVMs, toggleVMDetails, theme }: VMCardProps) => (
<Box
sx={{
p: 1.5,
bgcolor: theme.palette.grey[50],
borderRadius: 1,
borderWidth: 1,
borderStyle: 'solid',
borderColor: theme.palette.grey[200],
opacity: isActive ? 1 : 0.7,
position: 'relative',
overflow: 'hidden'
}}
>
<Box sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
mb: 1
}}>
<Box sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
}}>
<Box
sx={{
width: 6,
height: 6,
borderRadius: '50%',
bgcolor: isActive ? theme.palette.success.main : theme.palette.error.main,
}}
/>
<Typography variant="subtitle2" sx={{
fontWeight: 'medium',
display: 'flex',
alignItems: 'center',
gap: 1
}}>
{vm.name}
{vm.status === 'blocked' && (
<LockIcon sx={{
fontSize: '0.875rem',
color: theme.palette.warning.main,
opacity: 0.8
}} />
)}
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="caption" color="text.secondary">
{vm.power.toFixed(2)}W
</Typography>
<IconButton
size="small"
onClick={(e) => {
e.stopPropagation();
toggleVMDetails(vmId);
}}
>
<InfoOutlinedIcon fontSize="small" />
</IconButton>
</Box>
</Box>
// const VMCard = ({ vm, vmId, isActive, expandedVMs, toggleVMDetails, theme }: VMCardProps) => (
// <Box
// sx={{
// p: 1.5,
// bgcolor: theme.palette.grey[50],
// borderRadius: 1,
// borderWidth: 1,
// borderStyle: 'solid',
// borderColor: theme.palette.grey[200],
// opacity: isActive ? 1 : 0.7,
// position: 'relative',
// overflow: 'hidden'
// }}
// >
// <Box sx={{
// display: 'flex',
// alignItems: 'center',
// justifyContent: 'space-between',
// mb: 1
// }}>
// <Box sx={{
// display: 'flex',
// alignItems: 'center',
// gap: 1,
// }}>
// <Box
// sx={{
// width: 6,
// height: 6,
// borderRadius: '50%',
// bgcolor: isActive ? theme.palette.success.main : theme.palette.error.main,
// }}
// />
// <Typography variant="subtitle2" sx={{
// fontWeight: 'medium',
// display: 'flex',
// alignItems: 'center',
// gap: 1
// }}>
// {vm.name}
// {vm.status === 'blocked' && (
// <LockIcon sx={{
// fontSize: '0.875rem',
// color: theme.palette.warning.main,
// opacity: 0.8
// }} />
// )}
// </Typography>
// </Box>
// <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
// <Typography variant="caption" color="text.secondary">
// {vm.power.toFixed(2)}W
// </Typography>
// <IconButton
// size="small"
// onClick={(e) => {
// e.stopPropagation();
// toggleVMDetails(vmId);
// }}
// >
// <InfoOutlinedIcon fontSize="small" />
// </IconButton>
// </Box>
// </Box>
<Collapse in={expandedVMs[vmId]}>
<Box sx={{
mt: 1,
p: 1.5,
bgcolor: 'white',
borderRadius: 1,
borderWidth: 1,
borderStyle: 'solid',
borderColor: theme.palette.grey[200],
}}>
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography variant="caption" color="text.secondary" display="block">
Status
</Typography>
<Typography variant="body2" sx={{
display: 'flex',
alignItems: 'center',
gap: 0.5,
}}>
{vm.status === 'blocked' ? (
<>
<LockIcon sx={{
fontSize: '1rem',
color: theme.palette.warning.main
}} />
Blocked
</>
) : (
'Open'
)}
</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="caption" color="text.secondary" display="block">
CPU Cores
</Typography>
<Typography variant="body2">
{vm.confg.cpu}
</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="caption" color="text.secondary" display="block">
RAM
</Typography>
<Typography variant="body2">
{vm.confg.ram} GB
</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="caption" color="text.secondary" display="block">
Disk Size
</Typography>
<Typography variant="body2">
{vm.confg.disk} GB
</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="caption" color="text.secondary" display="block">
Power
</Typography>
<Typography variant="body2">
{vm.power.toFixed(2)}W
</Typography>
</Grid>
</Grid>
</Box>
</Collapse>
</Box>
);
// <Collapse in={expandedVMs[vmId]}>
// <Box sx={{
// mt: 1,
// p: 1.5,
// bgcolor: 'white',
// borderRadius: 1,
// borderWidth: 1,
// borderStyle: 'solid',
// borderColor: theme.palette.grey[200],
// }}>
// <Grid container spacing={2}>
// <Grid item xs={6}>
// <Typography variant="caption" color="text.secondary" display="block">
// Status
// </Typography>
// <Typography variant="body2" sx={{
// display: 'flex',
// alignItems: 'center',
// gap: 0.5,
// }}>
// {vm.status === 'blocked' ? (
// <>
// <LockIcon sx={{
// fontSize: '1rem',
// color: theme.palette.warning.main
// }} />
// Blocked
// </>
// ) : (
// 'Open'
// )}
// </Typography>
// </Grid>
// <Grid item xs={6}>
// <Typography variant="caption" color="text.secondary" display="block">
// CPU Cores
// </Typography>
// <Typography variant="body2">
// {vm.confg.cpu}
// </Typography>
// </Grid>
// <Grid item xs={6}>
// <Typography variant="caption" color="text.secondary" display="block">
// RAM
// </Typography>
// <Typography variant="body2">
// {vm.confg.ram} GB
// </Typography>
// </Grid>
// <Grid item xs={6}>
// <Typography variant="caption" color="text.secondary" display="block">
// Disk Size
// </Typography>
// <Typography variant="body2">
// {vm.confg.disk} GB
// </Typography>
// </Grid>
// <Grid item xs={6}>
// <Typography variant="caption" color="text.secondary" display="block">
// Power
// </Typography>
// <Typography variant="body2">
// {vm.power.toFixed(2)}W
// </Typography>
// </Grid>
// </Grid>
// </Box>
// </Collapse>
// </Box>
// );
const getMessageColor = (message: string, theme: any): string => {
if (message.includes('Error') || message.includes('BadRequestException')) {
@@ -489,7 +489,7 @@ const Migration = () => {
<ResourceDistributionChart
vmPlacementData={vmPlacementData}
isLoading={isLoadingVmPlacement}
onRefresh={fetchVmPlacementData}
onRefresh={async () => { await fetchVmPlacementData(); }}
/>
<MigrationAdviceCard