122 lines
5.0 KiB
TypeScript
122 lines
5.0 KiB
TypeScript
import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material'
|
|
import { Fragment, useState } from 'react'
|
|
import { IRegion } from '../interfaces/fuel'
|
|
import { useHardwares, useStorages } from '../hooks/swrHooks'
|
|
import FullFeaturedCrudGrid from './TableEditable'
|
|
import ServerService from '../services/ServersService'
|
|
import { GridColDef } from '@mui/x-data-grid'
|
|
import { Close } from '@mui/icons-material'
|
|
import ServerData from './ServerData'
|
|
|
|
export default function ServerStorage() {
|
|
const [open, setOpen] = useState(false)
|
|
const [selectedOption, setSelectedOption] = useState<IRegion | null>(null)
|
|
const { hardwares, isLoading } = useHardwares()
|
|
|
|
const [serverDataOpen, setServerDataOpen] = useState(false)
|
|
const [currentServerData, setCurrentServerData] = useState<any | null>(null)
|
|
|
|
const handleInputChange = (value: string) => {
|
|
return value
|
|
}
|
|
|
|
const handleOptionChange = (value: IRegion | null) => {
|
|
setSelectedOption(value)
|
|
}
|
|
|
|
const { storages, isLoading: serversLoading } = useStorages(selectedOption?.id, 0, 10)
|
|
|
|
const storageColumns: GridColDef[] = [
|
|
{ field: 'id', headerName: 'ID', type: 'number' },
|
|
{ field: 'hardware_id', headerName: 'Hardware ID', type: 'number' },
|
|
{ field: 'name', headerName: 'Название', type: 'string' },
|
|
{ field: 'size', headerName: 'Размер', type: 'string' },
|
|
{ field: 'storage_type', headerName: 'Тип хранилища', type: 'string' },
|
|
]
|
|
|
|
return (
|
|
<>
|
|
<Dialog
|
|
fullScreen
|
|
open={serverDataOpen}
|
|
onClose={() => {
|
|
setServerDataOpen(false)
|
|
}}
|
|
aria-labelledby="modal-modal-title"
|
|
aria-describedby="modal-modal-description">
|
|
<AppBar sx={{ position: 'sticky' }}>
|
|
<Toolbar>
|
|
<IconButton
|
|
edge="start"
|
|
color="inherit"
|
|
onClick={() => {
|
|
setServerDataOpen(false)
|
|
}}
|
|
aria-label="close"
|
|
>
|
|
<Close />
|
|
</IconButton>
|
|
</Toolbar>
|
|
</AppBar>
|
|
|
|
{currentServerData &&
|
|
<ServerData
|
|
id={currentServerData?.id}
|
|
region_id={currentServerData?.region_id}
|
|
name={currentServerData?.name}
|
|
/>
|
|
}
|
|
</Dialog>
|
|
|
|
{serversLoading ?
|
|
<CircularProgress />
|
|
:
|
|
<FullFeaturedCrudGrid
|
|
autoComplete={
|
|
<Autocomplete
|
|
open={open}
|
|
onOpen={() => {
|
|
setOpen(true)
|
|
}}
|
|
onClose={() => {
|
|
setOpen(false)
|
|
}}
|
|
onInputChange={(_, value) => handleInputChange(value)}
|
|
onChange={(_, value) => handleOptionChange(value)}
|
|
filterOptions={(x) => x}
|
|
isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name}
|
|
getOptionLabel={(option: IRegion) => option.name ? option.name : ""}
|
|
options={hardwares || []}
|
|
loading={isLoading}
|
|
value={selectedOption}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
size='small'
|
|
label="Hardware"
|
|
InputProps={{
|
|
...params.InputProps,
|
|
endAdornment: (
|
|
<Fragment>
|
|
{isLoading ? <CircularProgress color="inherit" size={20} /> : null}
|
|
{params.InputProps.endAdornment}
|
|
</Fragment>
|
|
)
|
|
}} />
|
|
)} />}
|
|
onSave={() => {
|
|
}}
|
|
onDelete={ServerService.removeServer}
|
|
initialRows={storages || []}
|
|
columns={storageColumns}
|
|
actions
|
|
onRowClick={(params) => {
|
|
setCurrentServerData(params.row)
|
|
setServerDataOpen(true)
|
|
}}
|
|
loading={false}
|
|
/>
|
|
}
|
|
</>
|
|
)
|
|
} |