Untitled

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