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

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

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

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

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

$g = New-Graph

# получаем необходимые данные
$vnets = Get-AzVirtualNetwork
$nics = Get-AzNetworkInterface

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

# добавляем vnet и пиринги в граф
$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
        }
    }
}

# добавляем NIC в граф
$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 добавляет удобства UI, такие как список элементов, поиск по графу и подсветка узлов с их соседями при клике.

Вот как это выглядит:

Вы можете посмотреть всё это в готовом jupyter-ноутбуке.

Посмотрите это демо

Вот короткое видео, показывающее, как взаимодействовать с графом: