Визуализируем Azure Networking при помощи D3js

Изображение стоит тысячи слов. Когда вы работаете со сложной сетевой инфраструктурой, было бы замечательно иметь вид сверху. В этой статье я хочу обсудить, как это можно достичь с помощью PowerShell, Jupyter notebooks и d3js

Мы уже знакомы с ядром .NET Interactive и Jupyter notebooks. Теперь мы хотим представить новый инструмент - d3js. Вкратце, это мощная визуализационная платформа для JavaScript. Среди прочего, она может помочь визуализировать графические и сетевые структуры. По сути, нам нужно построить собственный граф зависимостей между различными элементами сети, а затем преобразовать эти данные таким образом, чтобы их могла использовать d3js.

Первое, что мы сделаем, - это использование предварительной версии модуля PSQuickGraph, который позволяет динамически генерировать графические структуры.

Install-Module -Name PSQuickGraph -AllowPrerelease -RequiredVersion "2.0.2-alpha"
Import-Module PSQuickGraph -RequiredVersion "2.0.2"

Теперь мы можем инициализировать граф и собрать наши сетевые элементы из Azure.

$g = New-Graph

# pull necessary data
$vnets = Get-AzVirtualNetwork
$nics = Get-AzNetworkInterface

Далее нам нужно обработать наши данные и построить из них граф. Мы фактически сканируем наши массивы $vnets и $nics, добавляем их элементы в виде вершин и соединяем их направленными ребрами, когда они связаны: VNETs включают Subnets, а NICs прикреплены к Subnets.

# add vnets and peerings to the graph
$vnets | ForEach-Object {
    $currentVnet = $_
    $vnetVertex = [PSGraph.Model.PSVertex]::new($currentVnet.Id, $currentVnet)
    Add-Vertex -Graph $g -Vertex $vnetVertex
    $currentVnet.Subnets | % {
        $currentSubnet = $_
        $subnetVertex = [PSGraph.Model.PSVertex]::new($currentSubnet.Id, $currentSubnet)
        Add-Edge -Graph $g -From $vnetVertex -To $subnetVertex
    }
}

foreach ($v in $g.Vertices){
    foreach($p in $v.OriginalObject.VirtualNetworkPeerings) {
        foreach ($rvn in $p.RemoteVirtualNetwork) {
            $targetVertex = $g.Vertices.Where({$_.Label -eq $rvn.id})[0]
            Add-Edge -From $v -To $targetVertex -Graph $g
        }
    }
}

# add NICs to the graph
$nics | ForEach-Object {
    $vnetID = $_.IpConfigurations[0].Subnet.Id
    $targetVertex = $g.Vertices.Where({$_.Label -eq $vnetID})[0]
    Add-Edge -Graph $g -From ([PSGraph.Model.PSVertex]::new($_.name, $_)) -To $targetVertex
}

На этом этапе мы хотим использовать немного магии JS и D3, чтобы визуализировать граф. Часть JS добавляет несколько приятных функций пользовательского интерфейса, таких как список элементов, чтобы мы могли искать определенный узел в графе или выделять узел и другие прямо связанные узлы при клике.

This is how it looks like:

Вы можете увидеть все это в готовом к использованию jupyter notebook.