Skip to content

Commit 32a7413

Browse files
themr0cthemr0c
committed
RHIDP-5604 Configuring Entity Page widgets and tabs layout
Signed-off-by: Fabrice Flore-Thébault <[email protected]>
1 parent 76896d9 commit 32a7413

File tree

1 file changed

+215
-0
lines changed

1 file changed

+215
-0
lines changed

‎modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
= Configuring Entity Page widget and tab layout
2+
3+
4+
== Changing entity detail page tabs (title and order)
5+
6+
Some technical documentation on that could be found at https://github.com/redhat-developer/rhdh/blob/main/docs/dynamic-plugins/frontend-plugin-wiring.md#customizing-and-adding-entity-tabs
7+
8+
To customize the tab names you have currently two options in your {product} configuration.
9+
10+
* You can override the title of the entityTabs in the dynamic.plugins section as mentioned in the document above.
11+
* Or in the upstream.backstage.appConfig section which brings you some advantage in {product-short} 1.3 because this configuration doesn’t require you to include other plugin configurations like the mountPoints.
12+
13+
Based on the documentation above you can change the entity tab like this:
14+
15+
[source,yaml]
16+
----
17+
global:
18+
dynamic:
19+
plugins:
20+
- package: ./dynamic-plugins/dist/backstage-community-plugin-topology
21+
disabled: false
22+
pluginConfig:
23+
dynamicPlugins:
24+
frontend:
25+
backstage-community.plugin-topology:
26+
entityTabs:
27+
- path: /topology
28+
title: Topology Test
29+
mountPoint: entity.page.topology
30+
mountPoints:
31+
- mountPoint: entity.page.topology/cards
32+
importName: TopologyPage
33+
config:
34+
layout:
35+
gridColumn: "1 / -1"
36+
height: 75vh
37+
if:
38+
anyOf:
39+
- hasAnnotation: backstage.io/kubernetes-id
40+
- hasAnnotation: backstage.io/kubernetes-namespace
41+
----
42+
43+
The default configuration for {product-short} 1.3 could be found here: https://github.com/redhat-developer/rhdh/blob/release-1.3/dynamic-plugins.default.yaml#L234-L250 which doesn’t include this entityTabs configuration.
44+
45+
In the upstream.backstage.appConfig section you can override the tab titles without the need to repeat all mountPoints, which removes the need to update them with minor {product-short} releases.
46+
47+
[source,yaml]
48+
----
49+
upstream:
50+
backstage:
51+
appConfig:
52+
dynamicPlugins:
53+
frontend:
54+
# the name must not match the plugin
55+
backstage-community.plugin-topology:
56+
entityTabs:
57+
- path: /topology
58+
title: Changed Topology title
59+
mountPoint: entity.page.topology
60+
----
61+
62+
63+
The issue with both is to understand what default entity tabs do exist. So we like to share here the list of the default tabs (already prefixed with “Changed”). So when you apply the following configuration to your {product-short}, you could rename and reorder this tabs:
64+
65+
66+
[source,yaml]
67+
----
68+
upstream:
69+
backstage:
70+
appConfig:
71+
dynamicPlugins:
72+
frontend:
73+
entity-tabs-customization:
74+
entityTabs:
75+
- path: /
76+
title: Changed Overview
77+
mountPoint: entity.page.overview
78+
- path: /topology
79+
title: Changed Topology
80+
mountPoint: entity.page.topology
81+
- path: /issues
82+
title: Changed Issues
83+
mountPoint: entity.page.issues
84+
- path: /pr
85+
title: Changed Pull/Merge Requests
86+
mountPoint: entity.page.pull-requests
87+
- path: /ci
88+
title: Changed CI
89+
mountPoint: entity.page.ci
90+
- path: /cd
91+
title: Changed CD
92+
mountPoint: entity.page.cd
93+
- path: /kubernetes
94+
title: Changed Kubernetes
95+
mountPoint: entity.page.kubernetes
96+
- path: /image-registry
97+
title: Changed Image Registry
98+
mountPoint: entity.page.image-registry
99+
- path: /monitoring
100+
title: Changed Monitoring
101+
mountPoint: entity.page.monitoring
102+
- path: /lighthouse
103+
title: Changed Lighthouse
104+
mountPoint: entity.page.lighthouse
105+
- path: /api
106+
title: Changed Api
107+
mountPoint: entity.page.api
108+
- path: /dependencies
109+
title: Changed Dependencies
110+
mountPoint: entity.page.dependencies
111+
- path: /docs
112+
title: Changed Docs
113+
mountPoint: entity.page.docs
114+
- path: /definition
115+
title: Changed Definition
116+
mountPoint: entity.page.definition
117+
- path: /system
118+
title: Changed Diagram
119+
mountPoint: entity.page.diagram
120+
----
121+
122+
123+
124+
(Really technical note on that: The list of default tabs in 1.3 is defined in code, not YAML: https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/defaultTabs.tsx#L12-L79)
125+
126+
127+
Changing entity detail tab content
128+
The complexity of the entity detail page configuration comes from the fact that different plugins can contribute cards or complete tabs.
129+
130+
The Overview, Dependencies and API tabs contain a high number of not customizable default cards that depend on the entity kind and type.
131+
132+
Technically they are defined here if you want go really deep and see which cards are defined by default:
133+
https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/OverviewTabContent.tsx
134+
https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/DependenciesTabContent.tsx
135+
https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/ApiTabContent.tsx
136+
137+
Dynamic plugins that are included in {product-short} 1.3 you can find the default card layout configuration in this long YAML: https://github.com/redhat-developer/rhdh/blob/release-1.3/dynamic-plugins.default.yaml
138+
139+
To change, for example, the position of one of these cards, you must replicate the default configuration in your configuration and change the layout.gridColumn and layout.gridColumnEnd properties.
140+
141+
This is for example the default Tekton plugin configuration from that file:
142+
143+
144+
.This is an example for {product-short} 1.3, the plugin path has changed in {product-short} 1.4
145+
[source,yaml]
146+
----
147+
global:
148+
dynamic:
149+
plugins:
150+
- package: ./dynamic-plugins/dist/janus-idp-backstage-plugin-tekton
151+
disabled: false
152+
pluginConfig:
153+
dynamicPlugins:
154+
frontend:
155+
janus-idp.backstage-plugin-tekton:
156+
mountPoints:
157+
- mountPoint: entity.page.ci/cards
158+
importName: TektonCI
159+
config:
160+
layout:
161+
gridColumn: "1 / -1"
162+
if:
163+
allOf:
164+
- isTektonCIAvailable
165+
- mountPoint: entity.page.ci/cards
166+
importName: TektonCI
167+
config:
168+
layout:
169+
gridColumn: "1 / -1"
170+
if:
171+
allOf:
172+
- isTektonCIAvailable
173+
----
174+
175+
To show the same card side by side on the CI tab you can replicate the mount point and change the config.layout option.
176+
177+
The tab content is displayed in a responsive grid that uses a 12 column-grid and supports different breakpoints (xs, sm, md, lg, xl) that can be specified for a CSS property (gridColumn in our example).
178+
179+
The example below uses 6 of the 12 columns to show two Tekton CI cards side-by-side on large (lg) screens (span 6 columns) and show them among themselves (xs and above span all 12 columns).
180+
181+
182+
.This is an example for {product-short} 1.3, the plugin path has changed in {product-short} 1.4
183+
[source,yaml]
184+
----
185+
global:
186+
dynamic:
187+
plugins:
188+
- package: ./dynamic-plugins/dist/janus-idp-backstage-plugin-tekton
189+
disabled: false
190+
pluginConfig:
191+
dynamicPlugins:
192+
frontend:
193+
janus-idp.backstage-plugin-tekton:
194+
mountPoints:
195+
- mountPoint: entity.page.ci/cards
196+
importName: TektonCI
197+
config:
198+
layout:
199+
gridColumn:
200+
lg: span 6
201+
xs: span 12
202+
if:
203+
allOf:
204+
- isTektonCIAvailable
205+
- mountPoint: entity.page.ci/cards
206+
importName: TektonCI
207+
config:
208+
layout:
209+
gridColumn:
210+
lg: span 6
211+
xs: span 12
212+
if:
213+
allOf:
214+
- isTektonCIAvailable
215+
----

0 commit comments

Comments
 (0)