Skip to content

Commit 4315232

Browse files
rpiontikrpiontik
committed
Добавлен пример: Встраивание виджетов в представления стандартных сущностей
1 parent d039532 commit 4315232

14 files changed

Lines changed: 147 additions & 23 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
3. [Управление бизнес-сущностями](src/business_entity_management)
1717
4. [Пример сущности для бизнес-процессов](src/sequences_entity_example)
1818
5. [Динамические контексты](src/DynamicContext)
19+
6. [Встраивание виджетов в представления стандартных сущностей](src/widgets)
1920

2021

2122
## Разворачивание

‎dochub.yaml‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
imports:
2-
# Пример создания метамодели для описания в нотации C4 Model
2+
# 1. Пример создания метамодели для описания в нотации C4 Model
33
# - src/C4Model/dochub.yaml
4-
# Пример создания метамодели для описания в нотации C4 Model
4+
# 2. Валидации сущностей в DocHub с выводом информации в меню
55
# - src/validator_example/dochub.yaml
6+
# 3. Управление бизнес-сущностями
67
# - src/business_entity_management/dochub.yaml
8+
# 4. Пример сущности для бизнес-процессов
79
# - src/sequences_entity_example/dochub.yaml
8-
# - src/DynamicContext/dochub.yaml
10+
# 5. Динамические контексты
11+
# - src/DynamicContext/dochub.yaml
12+
# 5. Пример встраивание виджетов в представления Components и Aspects
13+
- src/widgets/dochub.yaml

‎src/DynamicContext/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
* components - данные архитектуры для рендеринга
2828
* components.yaml - компоненты уровня L2
2929
* root.yaml - корневой манифест данных архитектуры
30-
* contexts - архитектурные контакты;
30+
* contexts - архитектурные контексты
3131
* l1.yaml - манифест контекста уровня L1
3232
* l2.yaml - манифест контекста уровня L2
3333
* root.yaml - корневой манифест контекстов

‎src/widgets/README.md‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,48 @@
44
стандартных сущностей.
55

66
# Суть примера
7-
В примере демонстрируется возможность по расширению стандартных сущностей.
87
Создаются виджеты, которые встраиваются в представления Aspects и Component.
98

10-
Результат рендеринга описанной архитектуры уровня L2:
9+
В components встраиваивается виджет, демонстрирующий, кто зависит
10+
от данного компонента:
1111

12-
![L2](./images/l2.png)
12+
![Зависимые компоненты](./images/components.png)
1313

14-
Сгенерированное представление уровня L1:
14+
В aspects встраивается виджет, демонстрирующий, кто отвечает за
15+
реализацию данного архитектурного аспекта.
1516

16-
![L2](./images/l1.png)
17+
![Реализацторы аспекта](./images/aspects.png)
1718

1819
## Файловая структура примера
19-
* components - данные архитектуры для рендеринга
20-
* components.yaml - компоненты уровня L2
21-
* root.yaml - корневой манифест данных архитектуры
22-
* contexts - архитектурные контакты;
23-
* l1.yaml - манифест контекста уровня L1
24-
* l2.yaml - манифест контекста уровня L2
25-
* root.yaml - корневой манифест контекстов
20+
* entities - расширения сущностей
21+
* templates - шаблоны виджетов
22+
* people.md - Markdown шаблон для виджета сущности aspects
23+
* aspect.yaml - расширение сущности aspect
24+
* components.yaml - расширение сущности components
25+
* root.yaml - корневой манифест пакета расширения сущностей
2626
* images - картинки для настоящей документации
27+
* aspects.yaml - архитектурные аспекты
28+
* components.yaml - архитектурные компоненты
29+
* contexts.yaml - архитектурные контексты
2730
* dochub.yaml - корневой манифест примера
2831

2932
## Использование
30-
В меню плагина DocHub выберите пункты "L1" или "L2"
33+
В меню плагина DocHub выберите "Архитектура" -> "Контексты" -> "General".
34+
В открывшемся контексте кликните по архитектурногому компоненту или аспекту.
35+
Найдите в карточке втроенный виджет.
3136

32-
![Меню](./images/menu.png)
37+
![Контекст](./images/context.png)
3338

34-
Вносите изменения в данные архитектуры в файлах каталога [components/](./components).
35-
Наблюдайте изменения в рендеринге плагина DocHub.
39+
Вносите изменения в данные архитектуры в файлах каталога
40+
[components.yaml](./components.yaml) и [aspects.yaml](./aspects.yaml).
41+
Наблюдайте изменения в рендеринге карточек объектов.
3642

3743
## Задания для практики
38-
* Добавьте определения направления связей между компонентами L1 уровня;
39-
* Реализуйте дрилдаун компонентов L1 в L2.
44+
* Создайте дополнительные компоненты, которые будут связаны с компонентом backend.
45+
Проверьте, что в карточке компонента backend появилась информация об
46+
этих зависимостях;
47+
* Добавьте новое поле в шаблон выиджета aspects в [расширении](./entities/aspects.yaml).
48+
Добейтесь корректного вывода значания этого поля в карточке аспектов при заполнении
49+
в коде архитектуры.
50+
* Измените виджет вывода зависимостей внешних компонентов в расширении [components](./entities/components.yaml)
51+
так, чтобы зависомости наглядно отображались в виде диаграммы.

‎src/widgets/aspects.yaml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
aspects:
2+
ordering:
3+
location: Заказы
4+
title: Заказ товаров
5+
prodact: Буренин Ольгерт Юрьевич
6+
analyst: Семенов Руслан Вазенович
7+
curator: Кучменко Татьяна Вадимовна
8+
payment:
9+
location: Оплаты
10+
title: Оплаты товаров
11+
prodact: Федоров Илья Степонович
12+
analyst: Семенов Руслан Вазенович
13+
curator: Зайчик Иван Макарович

‎src/widgets/components.yaml‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,25 @@ components:
55
title: Пользователь
66
links:
77
- id: frontend
8+
direction: <->
89
frontend:
910
entity: component
1011
title: Приложение
1112
links:
1213
- id: backend
14+
direction: <->
15+
aspects:
16+
- ordering
17+
- payment
1318
backend:
14-
entity: Бэкенд
19+
entity: component
1520
title: Сервер приложения
1621
links:
1722
- id: database
23+
direction: <->
24+
aspects:
25+
- payment
26+
- ordering
1827
database:
1928
entity: database
2029
title: База данных

‎src/widgets/contexts.yaml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Сформируем диаграмму взаимодействия компонентов
2+
contexts:
3+
general:
4+
title: Диаграмма взаимодействий
5+
location: General
6+
components:
7+
- "**" # Выберем все, что описано в архитектуре

‎src/widgets/dochub.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@ imports:
55
- components.yaml
66
# Подключаем аспекты
77
- aspects.yaml
8+
# Подключаем онтексты
9+
- contexts.yaml

‎src/widgets/entities/aspects.yaml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
entities:
2+
# Расширяем сущность "aspects"
3+
aspects:
4+
# Инъектируем собственный виджет
5+
widgets:
6+
# Будем показывать расширенную информацию об аспекте
7+
people: # Идентификатор виджета
8+
# Название виджета
9+
title: Люди
10+
# Расположение
11+
# < - слева
12+
# > - справа
13+
# = - Растянуть на 100%
14+
align: "<"
15+
# Тип документа шаблона
16+
type: markdown
17+
# Шаблон виджета
18+
template: templates/people.md
19+
# Данные для шаблона
20+
source: >
21+
(
22+
$lookup(aspects, $params.aspect)
23+
)

‎src/widgets/entities/components.yaml‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
entities:
2+
components:
3+
widgets:
4+
# Будем показывать внешние связи на данный компонент
5+
outside_links: # Идентификатор виджета
6+
# Название виджета
7+
title: Кто зависит от этого компонента
8+
# Расположение
9+
# < - слева
10+
# > - справа
11+
# = - Растянуть на 100%
12+
align: "<"
13+
# Тип документа шаблона
14+
type: table
15+
# Определяем заголовок таблицы
16+
headers:
17+
- value: id # Идентификатор зависимого компонента
18+
text: Идентификатор # Заголовок колокнки
19+
sortable: true # Производить сортировку по колонке
20+
align: left # Форматирование по горизонтали
21+
width: 40% # Ширина колонки
22+
link: link
23+
- value: title # Наименование зависимого компонента
24+
text: Наименование
25+
sortable: true
26+
align: left # Форматирование по горизонтали
27+
width: 40%
28+
link: link
29+
- value: direction # Направление связи
30+
text: Направление связи
31+
sortable: true
32+
align: center
33+
width: 20%
34+
# Данные для шаблона
35+
source: >
36+
(
37+
[$distinct(components.$spread().(
38+
$id := $keys()[0];
39+
$title := *.title;
40+
$links := $distinct($.*.links[id=$params.component].("" & direction));
41+
$links.{
42+
"id": $id,
43+
"title": $title,
44+
"direction": $links,
45+
"link": "/architect/components/" & $id
46+
}
47+
))^(id)]
48+
)

0 commit comments

Comments
 (0)