Каталог решений - Визуализация деревьев с функциональностью Drag&Drop

Исходная задача

Согласно ITIL 4, CMDB — Configuration Management Data Base — переводится как «база данных управления конфигурацией». Это глобальное хранилище, которое включает все элементы ИТ-инфраструктуры организации и логические связи между ними. CMDB охватывает как аппаратные и программные компоненты (серверы, ПК и т.д.), так и конфигурации. В результате складывается комплексная картина всего ИТ-ландшафта.

Необходимо реализовать функциональнось визуализации и интерактивного изменения дерева ИТ-ландшафта.

Какие инструменты были опробованы?

1. Graphviz

2. jOrgChart

GraphVis очень крутой инструмент, но в данной ситуации он не подошёл. Единственная причина — он дает статическую картинку (нет возможности перемещать элементы — Drag&Drop)

jOrgChart — это плагин javascript, позволяющий визуализировать деревья в HTML и поддерживающий функциоанльность Drag&Drop.

За основу была взята обработка Сергея Белькина. 

Что было добавлено/изменено:

1. Добавлен механизм анализа внесенных изменений (исходное дерево, текущее дерево);

2. Оптимизированы рекурсивные алгоритмы обработки деревьев;

3. Добавлен механиз хранения деревьев в виде массива предков. В теории, любой граф (дерево в частности) можно хранить тремя способами: список смежности, список ребер, матрица смежности. Плюс деревья можно хранить/обрабатывать в виде массива предков — что ускоряет работу алгоритма.

Общий алгоритм работы

Особенности реализации

1. Каждому элементу назначается ID — уникальный порядковый идентификатор, по которому будет проводиться обратное восстановление дерева объектов. При этом ID будет равен индексу массива предков, соответствующего дерева. На визуализации для каждого элемента будет добавляться строка "#IDxx" — это в принципе можно избежать — например, хранить ID скрытом теге <p> html.

2. Анализ изменений через массив. Текущее и исходное деревья хранятся не в типе данных ДеревоЗначений, а в массиве. Сделано для ускорения алгоритма.

Тестировал на платформе 1С:Предприятие 8.3 релиз 8.3.20.1674

Видео демонстрация функциональности Drag&Drop и анализа измененных объектов: