From API to Graph: Программный просмотрщик метаданных Directum RX

Разработка в Directum RX рано или поздно требует погружения в структуру метаданных. При анализе сложных иерархий наследования иногда возникают трудности в понимании что откуда пошло. Возникали ли у вас вопросы: «От кого наследоваться при создании нового типа документа?» или же «Кто вообще включается в Субъекты прав (Recipients)?»

В этой статье я представлю разработанное мной решение – утилиту для визуализации метаданных Directum RX. Она строит интерактивное дерево, наглядно отображающее структуру объектов, их свойства, действия и цепочки наследования.

Крайне рекомендую вначале ознакомиться со статьей моего коллеги, Константина Бастылева: Краткий экскурс в метаданные Sungero и использование этих знаний при рефакторинге.

Описание решения

Решение представляет собой визуализацию схемы классов метаданных для удобного восприятия. В работе используется сервис интеграции и функции пространства имен Sungero.Metadata, сторонний компонент на React, а также библиотека Mermaid для отрисовки схем.

Рисунок: Внешний вид компонента.

Решение позволяет отслеживать все цепочки наследования, свойства и методы типов сущностей. Реализовано два режима:

1. Схема – упрощенная схема наследования, удобное и понятное отслеживание.
2. Классы – схема классов сущностей, с подробным описанием свойств и методов.

 

На Схеме перекрытые сущности будут дополнительно выделяться фиолетовым цветом, а абстрактные типы будут иметь двойные линии по бокам.

Рисунок: Специальные обозначения для перекрытых и абстрактных сущностей.

 

Кроме этого, в каждом режиме можно выполнять поиск по:

- названию сущности,
- модулю,
- идентификатору,
- названию полей и действий.

Найденные сущности будут подсвечены золотой окантовкой, а также будут выведены их предки и потомки для понимания существующих связей.

Рисунок: Выполнение поиска.

Рисунок: Подсветка найденных элементов.

 

Схема классов дополнительно разбита по модулям:

Рисунок: Внешний вид схемы классов сущностей.

Рисунок: Классы разбиты на группы по модулям, в которых они реализованы.

Рисунок: Пример свойств и действий сущности

 

Также для примера возможностей библиотеки mermaid добавил два компонента:

1. Количество документов в системе по типам

Рисунок: Компонент с распределением документов в системе по типам.

 

 

2. Количество активных заданий по типам

Рисунок: Компонент с распределением активных заданий в системе по типам.

 

 

Как это работает

В основе решения лежит шаблон стороннего компонента от компании Directum. О том из чего состоит сторонний компонент и как его использовать есть статья моего коллеги, Никиты Вершинина: Сторонний контрол для визуальной работы со штампом - также рекомендую к прочтению.

Помимо установки шаблона, были добавлены библиотеки mermaid.js и react-zoom-pan-pinch, разработан внешний вид компонентов. С библиотекой mermaid невероятно просто и удобно работать, все что требуется от разработчика - составить корректное текстовое выражение с полным описанием схемы. На выходе получаем векторное изображение, которое можно разместить на компоненте и удобным образом перемещать и масштабировать.

Рисунок: Перемещение по схеме при помощи мыши.

Также были написаны методы для сервиса интеграции по получению структур метаданных и всей необходимой информации. На фронте выполняется генерация выражений в зависимости от пользовательского ввода в поиске.

Структура решения

Исходный код решения для RX: https://github.com/STARKOV-Group/MetadataViewerRX

• Решение MetadataViewer с настроенным сторонним компонентом;
• В модуле Metadata находятся структуры и методы интеграции для получения данных из системы.

Исходный код компонента React: https://github.com/STARKOV-Group/MetadataViewerReact

Также есть возможность копировать код в существующий модуль (все расположено компактно) и установить собранный компонент в свое решение, или же дополнить решение собственным функционалом.

Установка и настройка

Вариант 1

1. Импортировать решение из пакета
2. Опубликовать решение
3. Вынести компонент представлением на обложку модуля

Рисунок: Настройка представления модуля.

 

Вариант 2

    Если требуется перенести функции в собственное решение, либо доработать сторонний компонент:

1. Перенести серверные функции и структуры в новый модуль
2. В папке компонента в файле config.js необходимо указать имя модуля

Рисунок: Файл конфигурации компонента.

3. Собрать компонент командой: npm run build:release
4. В DDS добавить в решение собранный компонент из папки dist

Рисунок: Загрузка исходных файлов в сторонние компоненты RX.

5. Опубликовать решение
6. Если ваш модуль не видит неймспейсы workflow или content – необходимо добавить их в зависимости решения

Рисунок: Зависимости решения.

7. Вынести компонент представлением на обложку модуля

Структура компонента

    app-loader.tsx – точка входа в проложение

    app.tsx – первая страница

    metadata.tsx, datachart.tsx – основные компоненты

    mermaid-view.tsx – отдельный компонент для работы с mermaid

    utils – вспомогательные функции

    api – методы обращения в сервис интеграции и типы данных

 

 

 

 

 

 

 

 

 

 

 

 

 

Рисунок: Структура React проекта.

 

Чтобы локально собирать и тестировать компонент используйте команду: npm run start:dev:standalone

Кроме того, добавьте прокси для обхода проблем связанных с политиками CORS:

Рисунок: Настройка прокси в webpack.config.js

 

Для быстрого старта с собственным компонентом будет достаточно сгенерировать выражение для mermaid и установить его как значение через функцию setMermaidDefinition.

Рисунок: Пример настройки компонента.

О том какие бывают выражения и как использовать подскажет официальная документация.

 

Заключение

Сторонние компоненты – это мощный и гибкий инструмент для создания собственных интерфейсов в Directum RX. В «СТАРКОВ Групп» мы активно используем эту возможность, чтобы улучшить пользовательский опыт и качественнее выполнять поставленные задачи. Приятно, что вендор предоставил такую возможность, открывающую новые горизонты для кастомизации системы. В дальнейшем возможно будут вноситься улучшения в функционал по просмотру метаданных.

Буду рад любым идеям, комментариям и вопросам!