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, PointElement,
LineElement, LineElement,
BarElement, BarElement,
BarController,
LineController,
Title, Title,
Tooltip, Tooltip,
Legend, Legend,
@@ -22,6 +24,8 @@ ChartJS.register(
PointElement, PointElement,
LineElement, LineElement,
BarElement, BarElement,
BarController,
LineController,
Title, Title,
Tooltip, Tooltip,
Legend Legend
@@ -140,7 +144,7 @@ const ResourceDistributionChart: React.FC<ResourceDistributionChartProps> = ({
titleFont: { titleFont: {
family: theme.typography.fontFamily, family: theme.typography.fontFamily,
size: 13, size: 13,
weight: '600' weight: 600
}, },
bodyColor: theme.palette.text.secondary, bodyColor: theme.palette.text.secondary,
bodyFont: { bodyFont: {
@@ -176,7 +180,7 @@ const ResourceDistributionChart: React.FC<ResourceDistributionChartProps> = ({
font: { font: {
family: theme.typography.fontFamily, family: theme.typography.fontFamily,
size: 12, size: 12,
weight: '500' weight: 500
} }
}, },
beginAtZero: true, beginAtZero: true,
@@ -204,7 +208,7 @@ const ResourceDistributionChart: React.FC<ResourceDistributionChartProps> = ({
font: { font: {
family: theme.typography.fontFamily, family: theme.typography.fontFamily,
size: 12, size: 12,
weight: '500' weight: 500
} }
}, },
beginAtZero: true, 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 { Grid, Paper, Typography, Box, Divider } from '@mui/material';
import StorageIcon from '@mui/icons-material/Storage'; import StorageIcon from '@mui/icons-material/Storage';
import ComputerIcon from '@mui/icons-material/Computer'; import ComputerIcon from '@mui/icons-material/Computer';
@@ -19,7 +19,7 @@ const SummaryStats: React.FC = () => {
return jsonData; return jsonData;
}, []); }, []);
const { data, pollingInterval } = useSmartPolling<VMPlacementData>( const { data } = useSmartPolling<VMPlacementData>(
fetchData, fetchData,
null, null,
5000, // min interval: 5 seconds 5000, // min interval: 5 seconds

2
src/pages/Maintenance.tsx
View File

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