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...