import React, { useEffect, useState } from 'react'
import Box from './public/table-card';
import { ApiTable, useFsRequest } from '$utils';
import './style.less';
function NodeResource(props) {
    const { data: cluters = {} } = useFsRequest({
        url: 'homepage/datatotal/cluters',
        pollingInterval: 1000 * 20,
    });

    const renderBody = () => {
        return <div className='node-resource-container'>
            <div className='_item'>
                <div className='_noderesource_data'>{cluters?.disk}<span className='_percent'>%</span></div>
                <div className='_noderesource_title'>硬盘</div>
                <div className='disk_icon' />
            </div>
            <div className='_item'>
                <div className='_noderesource_data'>{cluters?.memory}<span className='_percent'>%</span></div>
                <div className='_noderesource_title'>内存</div>
                <div className='memory_icon' />
            </div>
            <div className='_item'>
                <div className='_noderesource_data'>{cluters?.cpu}<span className='_percent'>%</span></div>
                <div className='_noderesource_title'>CPU</div>
                <div className='cpu_icon' />
            </div>
        </div>

    }

    return <Box title={"节点资源"} >
        {renderBody()}
    </Box>
}

export default NodeResource;