This commit is contained in:
parent
6f7b821c8b
commit
3a5b0bdcbc
162 changed files with 15801 additions and 224 deletions
|
|
@ -0,0 +1,297 @@
|
|||
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 };
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue