How are nodes and links build from an ospf database

[ObaidAshiq]

i am building an ospf visualizer kind of thing in react
As far as i have researched,
You need 3 data things, from the terminal of a router
And that we can get from these commands
show IP ospf database
show ip ospf database router
show ip ospf database network
You might also need
show ip ospf database external which I am skipping not to increase the complexity of my project

The problem I am facing is how to create those arrays of nodes and links ?
If u could guide me through, would be a great help

Youtube Video

[Vadims06]

Hi @ObaidAshiq ,
it's quite interesting question. Feel free wiki page describing onboarding process of new vendors into Topolograph, I described the idea how to parse the output of these commands. But the youtube video attached also discovered this idea as well.
Also you can use topolograph API and get an array of nodes and links in its reply.
I would be grateful if you also share what it's your end goal from your visualizer, do you want to visualize OSPF from the vendor currently not supported by Topolograph or as a coding practice?

[ObaidAshiq]

What i have been upto
Is build something like this in javascript(react.js)
Been in javascript background, and currently looking for the ways
I have built UI for it, which uses this structure like this for the visualization

const [graph, setGraph] = useState({
    nodes: [
      {
        id: 1,
        label: "10.20.20.20",
        title: "SW001",
        image: urlSwitch,
        shape: "image",
        shadow: true,
        customData:{
          deviceName:"R001",
          deviceType:"Router",
          softwareVersion:'1.1.6.1'
        }
      },
      {
        id: 2,
        label: "10.20.20.21",
        title: "SW004",
        image: urlSwitch,
        shape: "image",
        shadow: true,
        customData:{
          deviceName:"R004",
          deviceType:"Router",
          softwareVersion:'17.3.6.207'
        }
      },
      . . .
    ],
    edges: [
       {
        from: 2,
        to: 1,
        color: "blue",
        label: "backup path",
        smooth: { enabled: true, type: "dynamic" },
      },
      {
        from: 1,
        to: 2,
        color: "blue",
        label: "backup path",
        smooth: { enabled: true, type: "dynamic" },
      },
      . . .
    ],
  });

Using visjs for the visualization

Problems I face are

• Parser in js
• Build logic for creating of nodes and edges as per the structure above

For the parser as you suggested TextFSM, I don't see it compatible with js, will find some alternatives, and will get back to you