297 lines
11 KiB
TypeScript
297 lines
11 KiB
TypeScript
import { useState } from "react";
|
|
import { NodeColors } from "../../../../components/customeNodes/types/colors";
|
|
import { stateColor, stateMap } from "../deviceState";
|
|
import { Interfaces, NetworkNode, IpNode, PortNode, NodeGroup, NetworkInterface } from "../../../../const/types/types"
|
|
|
|
export const useInitNodes = () => {
|
|
const [initedNodes, setNodes] = useState<(NetworkInterface)[]>([]);
|
|
const yGap = 20
|
|
|
|
interface MainHeight {
|
|
x?: number,
|
|
y?: number,
|
|
height?: number;
|
|
}
|
|
|
|
const findMaxHeight = (data: any[])=>{
|
|
const filtred = data.filter((el)=> el.x ===0 || el.x ===1)
|
|
if(filtred.length ===0){
|
|
return 140
|
|
}
|
|
const max =filtred.reduce((max, el)=> Math.max(max, el.height), 0)
|
|
return max
|
|
|
|
}
|
|
|
|
const setInitNodes = (interfaces: Interfaces[]) => {
|
|
setNodes(() => {
|
|
const networkNodes: NetworkNode[] = []
|
|
const portNodes: PortNode[] = []
|
|
const ipGroupes: NodeGroup[][] = []
|
|
const ipNodes: IpNode[][] = []
|
|
const networkGroups: NodeGroup[] = []
|
|
|
|
let width: number, columnCount: MainHeight[] = []
|
|
let widthArr: number[] = []
|
|
let heightArr: number[] = []
|
|
|
|
interfaces.map((b, indexB) => {
|
|
const centerX = 20
|
|
const centerY = 20
|
|
let currentY = centerY;
|
|
b.mainData.map((data, networkIndex) => {
|
|
data.ipArrays.map((el) => {
|
|
if (el.route === true) {
|
|
const column = { x: 1 }
|
|
columnCount.push(column)
|
|
}
|
|
else if (el.route === false) {
|
|
const column = { x: 0 }
|
|
columnCount.push(column)
|
|
}
|
|
})
|
|
|
|
if (columnCount.length == 2) {
|
|
width = (260 * 2) + 45
|
|
}
|
|
else {
|
|
width = 260 + 35
|
|
}
|
|
|
|
let mainHeight: MainHeight[] = []
|
|
|
|
data.ipArrays.forEach((ipInfo, groupIndx) => {
|
|
if(!ipInfo || !ipInfo.ipData || ipInfo.ipData.length ===0){
|
|
return
|
|
}
|
|
let groupes: NodeGroup[] = []
|
|
let nodeCount = ipInfo.ipData.length
|
|
let x = 20, y = 150, newX, newY, gap = 0
|
|
|
|
let height = (140 + 15) * (nodeCount)
|
|
|
|
|
|
if (ipInfo.route) {
|
|
newX = width - 260 - 15
|
|
|
|
const groupHeight = {
|
|
x: 1,
|
|
height: height
|
|
}
|
|
mainHeight.push(groupHeight)
|
|
}
|
|
else {
|
|
newX = x
|
|
const groupHeight = {
|
|
x: 0,
|
|
height: height
|
|
}
|
|
mainHeight.push(groupHeight)
|
|
}
|
|
|
|
|
|
const newIpGroupe: NodeGroup = {
|
|
id: `g${indexB}_nw${networkIndex}_rx${groupIndx}`,
|
|
position: {
|
|
x: newX,
|
|
y: y
|
|
},
|
|
data: {
|
|
style: {
|
|
width: 260,
|
|
height: height
|
|
}
|
|
},
|
|
hidden: false,
|
|
type: "ipgroup",
|
|
parentId: `g${indexB}_nw${networkIndex}`,
|
|
extent: 'parent',
|
|
draggable: false,
|
|
}
|
|
|
|
let startY = 0
|
|
const ipGap = 15
|
|
|
|
|
|
ipInfo.ipData.map((ip, ipIndex) => {
|
|
let nodes: IpNode[] = []
|
|
const y = startY;
|
|
|
|
startY += 140 + ipGap;
|
|
|
|
|
|
const newIpNode: IpNode = {
|
|
id: `g${indexB}_nw${networkIndex}_rx${groupIndx}_ip${ipIndex}`,
|
|
position: {
|
|
x: 0,
|
|
y: y
|
|
},
|
|
type: 'ip',
|
|
data: {
|
|
ipData: {
|
|
ipType: ip.ipType,
|
|
ipAdress: ip.ipAdress,
|
|
ipGate: ip.ipGate,
|
|
ipDns: ip.ipDns,
|
|
ipRoutese: [],
|
|
ipVersion: ip.ipVersion
|
|
},
|
|
interfaceData:{
|
|
device: data.networkData.device,
|
|
connection: data.networkData.connection,
|
|
},
|
|
route: ipInfo.route,
|
|
style: {
|
|
width: 260,
|
|
height: 140,
|
|
borderType: "solid",
|
|
borderColor: NodeColors["1"],
|
|
},
|
|
},
|
|
hidden: false,
|
|
parentId: `g${indexB}_nw${networkIndex}_rx${groupIndx}`,
|
|
extent: 'parent',
|
|
draggable: false,
|
|
}
|
|
nodes.push(newIpNode)
|
|
ipNodes.push(nodes)
|
|
})
|
|
groupes.push(newIpGroupe)
|
|
ipGroupes.push(groupes)
|
|
})
|
|
|
|
const maxHeight = findMaxHeight(mainHeight);
|
|
// const networkNodeHeight = (maxHeight || 0) + 150;
|
|
const networkNodeHeight = maxHeight +150
|
|
|
|
let groupId: string
|
|
if (data.networkData.connection === 'unknown') {
|
|
groupId = 'cn1'
|
|
}
|
|
else {
|
|
groupId = 'cn0'
|
|
}
|
|
|
|
const y = currentY;
|
|
|
|
currentY += networkNodeHeight + yGap;
|
|
|
|
|
|
const newNode: NetworkNode = {
|
|
id: `g${indexB}_nw${networkIndex}`,
|
|
position: {
|
|
x: centerX,
|
|
y: y
|
|
},
|
|
type: "network",
|
|
data: {
|
|
networkData: {
|
|
device: data.networkData.device,
|
|
type: data.networkData.type,
|
|
mac: data.networkData.mac,
|
|
mtu: data.networkData.mtu,
|
|
state: stateMap[data.networkData.state],
|
|
connection: data.networkData.connection,
|
|
id: `nw${networkIndex}`,
|
|
strength: data.networkData.strength
|
|
},
|
|
style: {
|
|
width: width,
|
|
height: networkNodeHeight as number,
|
|
borderType: "solid",
|
|
borderColor: NodeColors["0"],
|
|
backgroundColor: stateColor[data.networkData.state]
|
|
},
|
|
height: networkNodeHeight,
|
|
visible: true
|
|
},
|
|
parentId: `g${indexB}`,
|
|
extent: 'parent',
|
|
};
|
|
|
|
widthArr.push(width)
|
|
heightArr.push(networkNodeHeight)
|
|
networkNodes.push(newNode)
|
|
columnCount = []
|
|
|
|
let portNodeHeight = 60;
|
|
let absoluteY = (currentY - portNodeHeight + 10) - (networkNodeHeight / 2);
|
|
if (data.networkData.connection !== 'unknown') {
|
|
const portNode: PortNode = {
|
|
id: `p-nw${networkIndex}`,
|
|
position: {
|
|
x: -350,
|
|
y: absoluteY,
|
|
},
|
|
type: 'portNode',
|
|
data: {
|
|
label: `${data.networkData.connection}`,
|
|
id: `p-nw${networkIndex}`,
|
|
style: {
|
|
width: 260,
|
|
height: portNodeHeight,
|
|
borderType: "solid",
|
|
borderColor: NodeColors["0"],
|
|
},
|
|
}
|
|
}
|
|
portNodes.push(portNode)
|
|
}
|
|
})
|
|
|
|
const sumHeight = heightArr.reduce((a, c) => a + c, 0);
|
|
const maxWidth = Math.max(...widthArr)
|
|
|
|
let count = b.mainData.length
|
|
let groupHeight = sumHeight + (count * 30)
|
|
let groupWidth = maxWidth + 40
|
|
|
|
let label: string;
|
|
|
|
if (indexB == 0) {
|
|
label = 'Активные интерфейсы'
|
|
}
|
|
else {
|
|
label = 'Неактивные интерфейсы'
|
|
}
|
|
|
|
let x = b.container_x
|
|
if (indexB > 0 && x === 0) {
|
|
x = x + 500
|
|
}
|
|
|
|
if (b.mainData.length > 0) {
|
|
const networkGroup: NodeGroup = {
|
|
id: `g${indexB}`,
|
|
position: {
|
|
x: x,
|
|
y: b.container_y
|
|
},
|
|
type: "nodegroup",
|
|
data: {
|
|
label: label,
|
|
id: `g${indexB}`,
|
|
height: groupHeight,
|
|
style: {
|
|
width: groupWidth,
|
|
height: groupHeight,
|
|
borderType: "solid",
|
|
borderColor: NodeColors["0"],
|
|
},
|
|
},
|
|
}
|
|
|
|
networkGroups.push(networkGroup)
|
|
}
|
|
|
|
|
|
heightArr = []
|
|
})
|
|
|
|
return [...networkGroups, ...networkNodes, ...ipGroupes.flat(), ...portNodes, ...ipNodes.flat()];
|
|
});
|
|
|
|
};
|
|
|
|
return { initedNodes, setInitNodes };
|
|
};
|