forked from VinokurovVE/tests
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import { Box, Tab, Tabs } from "@mui/material"
|
|
import { useState } from "react"
|
|
import ServersView from "../components/ServersView"
|
|
import ServerIpsView from "../components/ServerIpsView"
|
|
import ServerHardware from "../components/ServerHardware"
|
|
import ServerStorage from "../components/ServerStorages"
|
|
import { BarChart } from '@mui/x-charts/BarChart';
|
|
|
|
export default function Servers() {
|
|
const [currentTab, setCurrentTab] = useState(0)
|
|
|
|
const handleTabChange = (newValue: number) => {
|
|
setCurrentTab(newValue);
|
|
}
|
|
|
|
interface TabPanelProps {
|
|
children?: React.ReactNode;
|
|
index: number;
|
|
value: number;
|
|
}
|
|
|
|
function CustomTabPanel(props: TabPanelProps) {
|
|
const { children, value, index, ...other } = props;
|
|
|
|
return (
|
|
<div
|
|
role="tabpanel"
|
|
hidden={value !== index}
|
|
id={`simple-tabpanel-${index}`}
|
|
aria-labelledby={`simple-tab-${index}`}
|
|
{...other}
|
|
>
|
|
{value === index && <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>{children}</Box>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%', p: '16px' }}>
|
|
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
|
<Tabs value={currentTab} onChange={(_, value) =>
|
|
handleTabChange(value)
|
|
} aria-label="basic tabs example">
|
|
<Tab label="Серверы" />
|
|
<Tab label="IP-адреса" />
|
|
<Tab label="Hardware" />
|
|
<Tab label="Storages" />
|
|
</Tabs>
|
|
</Box>
|
|
|
|
<CustomTabPanel value={currentTab} index={0}>
|
|
<ServersView />
|
|
</CustomTabPanel>
|
|
|
|
<CustomTabPanel value={currentTab} index={1}>
|
|
<ServerIpsView />
|
|
</CustomTabPanel>
|
|
|
|
<CustomTabPanel value={currentTab} index={2}>
|
|
<ServerHardware />
|
|
</CustomTabPanel>
|
|
|
|
<CustomTabPanel value={currentTab} index={3}>
|
|
<ServerStorage />
|
|
</CustomTabPanel>
|
|
|
|
<BarChart
|
|
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
|
|
series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
|
|
width={500}
|
|
height={300}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
} |