Untitled
unknown
javascript
4 years ago
20 kB
5
Indexable
import React, { FC, useState, useEffect } from "react"; import { Tag, Table, Input, Col, Popover, Switch, Space } from "antd"; import "./fitterOutputTableNew.css"; import { FaTable } from "react-icons/fa"; import { color } from "highcharts"; import { InfoCircleOutlined } from '@ant-design/icons'; const { Column, ColumnGroup } = Table; const columns = [ { title: 'TCAM Pool/Feature/Policy', dataIndex: 'tcam', key: 'tcam', render: (element) => { let words = element.split(" "); if(words[0] === "Ingress"){ return <div className="ingress-title"> <p>{element}</p> </div> } else { return <div className="egress-title"> <p>{element}</p> </div> } } }, { title: 'Slice 0', dataIndex: 'slice_0', key: 'slice_0', children: [ { title: 'Interfaces', dataIndex: 'interface_0', key: 'interface_0', render: (data) => { if(data !== undefined){ if(data[0] !== "") return <Popover content={<div className="message-wrapper">{ data[1] }</div>} > {data[0]} <InfoCircleOutlined/> </Popover> } } }, { title: 'Used', dataIndex: 'used_0', key: 'used_0', }, { title: 'Free', dataIndex: 'free_0', key: 'free_0', } ] }, { title: 'Slice 1', dataIndex: 'slice_1', key: 'slice_1', children: [ { title: 'Interfaces', dataIndex: 'interface_1', key: 'interface_1', render: (data) => { if(data !== undefined){ if(data[0] !== "") return <Popover content={<div className="message-wrapper">{ data[1] }</div>} > {data[0]} <InfoCircleOutlined/> </Popover> } } }, { title: 'Used', dataIndex: 'used_1', key: 'used_1', }, { title: 'Free', dataIndex: 'free_1', key: 'free_1', } ] }, { title: 'Slice 2', dataIndex: 'slice_2', key: 'slice_2', children: [ { title: 'Interfaces', dataIndex: 'interface_2', key: 'interface_2', render: (data) => { if(data !== undefined){ if(data[0] !== "") return <Popover content={<div className="message-wrapper">{ data[1] }</div>} > {data[0]} <InfoCircleOutlined/> </Popover> } } }, { title: 'Used', dataIndex: 'used_2', key: 'used_2', }, { title: 'Free', dataIndex: 'free_2', key: 'free_2', } ] }, { title: 'Slice 3', dataIndex: 'slice_3', key: 'slice_3', children: [ { title: 'Interfaces', dataIndex: 'interface_3', key: 'interface_3', render: (data) => { if(data !== undefined){ if(data[0] !== "") return <Popover content={<div className="message-wrapper">{ data[1] }</div>} > {data[0]} <InfoCircleOutlined/> </Popover> } } }, { title: 'Used', dataIndex: 'used_3', key: 'used_3', }, { title: 'Free', dataIndex: 'free_3', key: 'free_3', } ] }, { title: 'Slice 4', dataIndex: 'slice_4', key: 'slice_4', children: [ { title: 'Interfaces', dataIndex: 'interface_4', key: 'interface_4', render: (data) => { if(data !== undefined){ if(data[0] !== "") return <Popover content={<div className="message-wrapper">{ data[1] }</div>} > {data[0]} <InfoCircleOutlined/> </Popover> } } }, { title: 'Used', dataIndex: 'used_4', key: 'used_4', }, { title: 'Free', dataIndex: 'free_4', key: 'free_4', } ] }, { title: 'Slice 5', dataIndex: 'slice_5', key: 'slice_5', children: [ { title: 'Interfaces', dataIndex: 'interface_5', key: 'interface_5', render: (data) => { if(data !== undefined){ if(data[0] !== "") return <Popover content={<div className="message-wrapper">{ data[1] }</div>} > {data[0]} <InfoCircleOutlined/> </Popover> } } }, { title: 'Used', dataIndex: 'used_5', key: 'used_5', }, { title: 'Free', dataIndex: 'free_5', key: 'free_5', } ] }, ]; type FitterOutputTableProps = { fitData: any; }; const FitterOutputTableNew: FC<FitterOutputTableProps> = ( props: FitterOutputTableProps ) => { const [dataTable, setDataTable] = useState<any>(); const [threshold, setThreshold] = useState<any>(70); const [checkStrictly, setCheckStrictly] = React.useState(false); useEffect(() => { if (props.fitData) { console.log(props.fitData); setDataTable(props.fitData); } }, [props.fitData]); const expandedRowRender = (featureTypeChildren) => { return ( <Table dataSource={featureTypeChildren} showHeader={false} // indentSize={40} size="small" style={{ width: "80vw" }} pagination={false} > <Column title="Feature Type" fixed="left" width={100} /> <Column title="Feature Name" dataIndex="featureName" key="featureName" width={80} /> <ColumnGroup title="Usused Per Slice"> <ColumnGroup title="Slice 0"> <Column width={35} dataIndex="data" key="data" render={(data) => ( <Popover content={<div className="messused-wrapper">{ data[0].interfaces.map((element) => { if ( data[0].interfaces.indexOf(element) === data[0].interfaces.length - 1 ) { return element.name ? element.name : typeof element !== "object" ? element : ""; } else { return element.name ? element.name + '\n' : (typeof element !== "object" ? element : "") + '\n' ; } })}</div>} > {data[0].interfaces.map((element) => { if ( data[0].interfaces.indexOf(element) === data[0].interfaces.length - 1 ) { return <InfoCircleOutlined/> } })} </Popover> )} /> <Column title="Used" dataIndex="data" key="data" fixed="left" width={120} render={(data, featureType) => ( <> {" "} <> {data[0].fit ? ( <Tag color={getColor(data[0], featureType, 0)}>Fit</Tag> ) : ( <Tag color="red">Not Fit</Tag> )} {" " + data[0].used} </> </> )} /> <Column title="Total" fixed="left" width={70} /> </ColumnGroup> <ColumnGroup title="Slice 1"> <Column width={35} dataIndex="data" key="data" render={(data) => ( <Popover content={<div className="messused-wrapper">{ data[1].interfaces.map((element) => { if ( data[1].interfaces.indexOf(element) === data[1].interfaces.length - 1 ) { return element.name ? element.name : typeof element !== "object" ? element : ""; } else { return element.name ? element.name + '\n' : (typeof element !== "object" ? element : "") + '\n' ; } })}</div>} > {data[1].interfaces.map((element) => { if ( data[1].interfaces.indexOf(element) === data[1].interfaces.length - 1 ) { return <InfoCircleOutlined/> } })} </Popover> )} /> <Column title="Used" dataIndex="data" key="data" fixed="left" width={100} render={(data, featureType) => ( <> {" "} <> {data[1].fit ? ( <Tag color={getColor(data[1], featureType, 1)}>Fit</Tag> ) : ( <Tag color="red">Not Fit</Tag> )} {" " + data[1].used} </> </> )} /> <Column title="Total" fixed="left" width={70} /> </ColumnGroup> <ColumnGroup title="Slice 2"> <Column width={35} dataIndex="data" key="data" render={(data) => ( <Popover content={<div className="messused-wrapper">{ data[2].interfaces.map((element) => { if ( data[2].interfaces.indexOf(element) === data[2].interfaces.length - 1 ) { return element.name ? element.name : typeof element !== "object" ? element : ""; } else { return element.name ? element.name + '\n' : (typeof element !== "object" ? element : "") + '\n' ; } })}</div>} > {data[2].interfaces.map((element) => { if ( data[2].interfaces.indexOf(element) === data[2].interfaces.length - 1 ) { return <InfoCircleOutlined/> } })} </Popover> )} /> <Column title="Used" dataIndex="data" key="data" fixed="left" width={100} render={(data, featureType) => ( <> {" "} <> {data[2].fit ? ( <Tag color={getColor(data[2], featureType, 2)}>Fit</Tag> ) : ( <Tag color="red">Not Fit</Tag> )} {" " + data[2].used} </> </> )} /> <Column title="Total" fixed="left" width={70} /> </ColumnGroup> <ColumnGroup title="Slice 3"> <Column width={35} dataIndex="data" key="data" render={(data) => ( <Popover content={<div className="messused-wrapper">{ data[3].interfaces.map((element) => { if ( data[3].interfaces.indexOf(element) === data[3].interfaces.length - 1 ) { return element.name ? element.name : typeof element !== "object" ? element : ""; } else { return element.name ? element.name + '\n' : (typeof element !== "object" ? element : "") + '\n' ; } })}</div>} > {data[3].interfaces.map((element) => { if ( data[3].interfaces.indexOf(element) === data[3].interfaces.length - 1 ) { return <InfoCircleOutlined/> } })} </Popover> )} /> <Column title="Used" dataIndex="data" key="data" fixed="left" width={100} render={(data, featureType) => ( <> {" "} <> {data[3].fit ? ( <Tag color={getColor(data[3], featureType, 3)}>Fit</Tag> ) : ( <Tag color="red">Not Fit</Tag> )} {" " + data[3].used} </> </> )} /> <Column title="Total" fixed="left" width={70} /> </ColumnGroup> <ColumnGroup title="Slice 4"> <Column width={35} dataIndex="data" key="data" render={(data) => ( <Popover content={<div className="messused-wrapper">{ data[4].interfaces.map((element) => { if ( data[4].interfaces.indexOf(element) === data[4].interfaces.length - 1 ) { return element.name ? element.name : typeof element !== "object" ? element : ""; } else { return element.name ? element.name + '\n' : (typeof element !== "object" ? element : "") + '\n' ; } })}</div>} > {data[4].interfaces.map((element) => { if ( data[4].interfaces.indexOf(element) === data[4].interfaces.length - 1 ) { return <InfoCircleOutlined/> } })} </Popover> )} /> <Column title="Used" dataIndex="data" key="data" fixed="left" width={100} render={(data, featureType) => ( <> {" "} <> {data[4].fit ? ( <Tag color={getColor(data[4], featureType, 4)}>Fit</Tag> ) : ( <Tag color="red">Not Fit</Tag> )} {" " + data[4].used} </> </> )} /> <Column title="Total" fixed="left" width={70} /> </ColumnGroup> <ColumnGroup title="Slice 5"> <Column width={35} dataIndex="data" key="data" render={(data) => ( <Popover content={<div className="messused-wrapper">{ data[5].interfaces.map((element) => { if ( data[5].interfaces.indexOf(element) === data[5].interfaces.length - 1 ) { return element.name ? element.name : typeof element !== "object" ? element : ""; } else { return element.name ? element.name + '\n' : (typeof element !== "object" ? element : "") + '\n' ; } })}</div>} > {data[5].interfaces.map((element) => { if ( data[5].interfaces.indexOf(element) === data[5].interfaces.length - 1 ) { return <InfoCircleOutlined/> } })} </Popover> )} /> <Column title="Used" dataIndex="data" key="data" fixed="left" width={100} render={(data, featureType) => ( <> {" "} <> {data[5].fit ? ( <Tag color={getColor(data[5], featureType, 5)}>Fit</Tag> ) : ( <Tag color="red">Not Fit</Tag> )} {" " + data[5].used} </> </> )} /> <Column title="Total" fixed="left" width={70} /> </ColumnGroup> </ColumnGroup> </Table> ); }; const handleThresholdChange = (e) => { setThreshold(e.target.value); }; const getSumUsed = (index: any, type: any) => { let sum: any = 0; type["featureTypeChildren"].forEach((element) => { sum += element.data[index].used; }); return sum; }; const getColor = (dataArray: any, featureType: any, index: any) => { let used = dataArray.used; let total = featureType.total; let freePercentused = 100 - (used * 100) / total; if (freePercentused < 100 - threshold) { return "yellow"; } return "green"; }; const getParentColor = (dataArray: any, featureType: any, index: any) => { let fit = true; featureType['featureTypeChildren'].forEach(element => { if(!element.data[index].fit) fit = false; }); if(fit){ let used = getSumUsed(index, featureType); let total = featureType.total; let freePercentused = 100 - (used * 100) / total; if (freePercentused < 100 - threshold) { return "yellow"; } else { return "green"; } } return "red"; }; const getFitParent = (dataArray: any, featureType: any, index: any) => { let fit = true; featureType['featureTypeChildren'].forEach(element => { if(!element.data[index].fit) fit = false; }); return fit? "Fit": "Not Fit"; }; return ( <> <Table columns={columns} dataSource={dataTable} bordered rowClassName={(record) => "tcam" + record.key.toString()} /> </> ); }; export default FitterOutputTableNew;
Editor is loading...