import React from 'react';
import { ResponsiveGrid } from '@alifd/next';
import WebInfoBlock from './components/WebInfoBlock';
import VisitBlock from './components/VisitBlock';
import mock from './mock.js';

const { Cell } = ResponsiveGrid;

const MonitorBlock = () => (
    <ResponsiveGrid gap={20}>
        <Cell colSpan={3}>
            <WebInfoBlock cardConfig={mock.JSErrorRate} />
        </Cell>
        <Cell colSpan={6} rowSpan={2}>
            <VisitBlock />
        </Cell>
        <Cell colSpan={3}>
            <WebInfoBlock cardConfig={mock.APISuccessRate} />
        </Cell>
        <Cell colSpan={3}>
            <WebInfoBlock cardConfig={mock.FirstRenderTime} />
        </Cell>
        <Cell colSpan={3}>
            <WebInfoBlock cardConfig={mock.ResourceError} />
        </Cell>
    </ResponsiveGrid>
);

export default MonitorBlock;