paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 31 Packages Projects Releases Wiki Activity

docs/frontend-system: initial extension architecture with extension structure

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2023-10-25 17:48:49 +02:00
parent bb2ca14a74
commit e733e6da56
2 changed files with 392 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/frontend-system/architecture-extension.drawio.svg
+332
View File
@@ -0,0 +1,332 @@
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="411px" height="382px" viewBox="-0.5 -0.5 411 382" content="&lt;mxfile scale=&quot;1&quot; border=&quot;20&quot;&gt;&lt;diagram id=&quot;W2IAjyMExVh-jXkT93Bg&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);">
<defs/>
<g>
<rect x="230" y="200" width="60" height="40" fill="#f5f5f5" stroke="#666666" pointer-events="all"/>
<rect x="220" y="200" width="60" height="40" fill="#f5f5f5" stroke="#666666" pointer-events="all"/>
<path d="M 210 180 L 210 120" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<rect x="130" y="140" width="160" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 160px; margin-left: 131px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Extension
</div>
</div>
</div>
</foreignObject>
<text x="210" y="164" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Extension
</text>
</switch>
</g>
<rect x="180" y="80" width="60" height="40" fill="#f5f5f5" stroke="#666666" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 100px; margin-left: 181px;">
<div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Output
</div>
</div>
</div>
</foreignObject>
<text x="210" y="104" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">
Output
</text>
</switch>
</g>
<path d="M 160 200 L 160 180" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<rect x="130" y="200" width="60" height="40" fill="#f5f5f5" stroke="#666666" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 220px; margin-left: 131px;">
<div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Input 1
</div>
</div>
</div>
</foreignObject>
<text x="160" y="224" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">
Input 1
</text>
</switch>
</g>
<path d="M 250 200 L 250 180" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<rect x="210" y="200" width="60" height="40" fill="#f5f5f5" stroke="#666666" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 220px; margin-left: 211px;">
<div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Input 2
</div>
</div>
</div>
</foreignObject>
<text x="240" y="224" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">
Input 2
</text>
</switch>
</g>
<path d="M 40.2 140 L 79.8 140 L 90 150 L 90 170 L 79.8 180 L 40.2 180 L 30 170 L 30 150 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 160px; margin-left: 31px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
disabled
</div>
</div>
</div>
</foreignObject>
<text x="60" y="164" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
disabled
</text>
</switch>
</g>
<path d="M 130 240 L 130 240 L 130 240 L 150 240 L 150 240 L 150 260 L 140 250 L 130 260 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 180 80 L 190 70 L 190 70 L 200 80 L 200 80 L 200 80 L 190 80 L 180 80 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 220 80 L 230 70 L 230 70 L 240 80 L 240 80 L 240 80 L 230 80 L 220 80 Z" fill="#fff2cc" stroke="#d6b656" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 170 240 L 170 240 L 170 240 L 190 240 L 190 240 L 190 260 L 180 250 L 170 260 Z" fill="#fff2cc" stroke="#d6b656" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 210 240 L 210 240 L 210 240 L 230 240 L 230 240 L 230 260 L 220 250 L 210 260 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 240 240 L 240 240 L 240 240 L 260 240 L 260 240 L 260 260 L 250 250 L 240 260 Z" fill="#fff2cc" stroke="#d6b656" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 270 240 L 270 240 L 270 240 L 290 240 L 290 240 L 290 260 L 280 250 L 270 260 Z" fill="#d5e8d4" stroke="#82b366" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 210 40 Q 210 50 200 50 Q 190 50 190 60" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<rect x="170" y="20" width="80" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 30px; margin-left: 171px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Output Data
</div>
</div>
</div>
</foreignObject>
<text x="210" y="33" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px" text-anchor="middle">
Output Data
</text>
</switch>
</g>
<path d="M 210 40 Q 210 50 220 50 Q 230 50 230 60" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<rect x="160" y="300" width="80" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 310px; margin-left: 161px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Input Data
</div>
</div>
</div>
</foreignObject>
<text x="200" y="313" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px" text-anchor="middle">
Input Data
</text>
</switch>
</g>
<path d="M 180 300 Q 180 280 160 280 Q 140 280 140 260" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<path d="M 180 300 Q 180 300 180 260" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<path d="M 220 300 Q 220 300 220 260" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<path d="M 220 300 Q 220 280 235 280 Q 250 280 250 260" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<path d="M 220 300 Q 220 280 250 280 Q 280 280 280 260" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<rect x="330" y="110" width="60" height="20" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 120px; margin-left: 331px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
id
</div>
</div>
</div>
</foreignObject>
<text x="360" y="124" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
id
</text>
</switch>
</g>
<rect x="330" y="140" width="60" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 160px; margin-left: 331px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
config schema
</div>
</div>
</div>
</foreignObject>
<text x="360" y="164" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
config sch...
</text>
</switch>
</g>
<rect x="330" y="190" width="60" height="20" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 200px; margin-left: 331px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
factory
</div>
</div>
</div>
</foreignObject>
<text x="360" y="204" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
factory
</text>
</switch>
</g>
<path d="M 330 120 L 290 150" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 330 200 L 290 170" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 330 160 L 290 160" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 90 160 L 130 160" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 90 110 L 130 150" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 90 210 L 130 170" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 40.2 90 L 79.8 90 L 90 100 L 90 120 L 79.8 130 L 40.2 130 L 30 120 L 30 100 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 110px; margin-left: 31px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
attachTo
</div>
</div>
</div>
</foreignObject>
<text x="60" y="114" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
attachTo
</text>
</switch>
</g>
<path d="M 40.2 190 L 79.8 190 L 90 200 L 90 220 L 79.8 230 L 40.2 230 L 30 220 L 30 200 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 210px; margin-left: 31px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
config
</div>
</div>
</div>
</foreignObject>
<text x="60" y="214" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
config
</text>
</switch>
</g>
<rect x="320" y="310" width="40" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 320px; margin-left: 321px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Static
</div>
</div>
</div>
</foreignObject>
<text x="340" y="323" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px" text-anchor="middle">
Static
</text>
</switch>
</g>
<rect x="300" y="310" width="20" height="20" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="320" y="340" width="70" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 350px; margin-left: 321px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Configurable
</div>
</div>
</div>
</foreignObject>
<text x="355" y="353" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px" text-anchor="middle">
Configurable
</text>
</switch>
</g>
<path d="M 305 340 L 315 340 L 320 345 L 320 355 L 315 360 L 305 360 L 300 355 L 300 345 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="20" y="310" width="10" height="10" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/>
<rect x="40" y="310" width="100" height="10" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 315px; margin-left: 42px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
<div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Extension Data A
</div>
</div>
</div>
</foreignObject>
<text x="42" y="318" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px">
Extension Data A
</text>
</switch>
</g>
<rect x="20" y="330" width="10" height="10" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/>
<rect x="40" y="330" width="100" height="10" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 335px; margin-left: 42px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
<div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Extension Data B
</div>
</div>
</div>
</foreignObject>
<text x="42" y="338" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px">
Extension Data B
</text>
</switch>
</g>
<rect x="20" y="350" width="10" height="10" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="40" y="350" width="100" height="10" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 355px; margin-left: 42px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
<div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Extension Data C
</div>
</div>
</div>
</foreignObject>
<text x="42" y="358" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px">
Extension Data C
</text>
</switch>
</g>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">
Text is not SVG - cannot display
</text>
</a>
</switch>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

docs/frontend-system/architecture/03-extensions.md
+60
View File
@@ -7,3 +7,63 @@ description: Frontend extensions
---
> **NOTE: The new frontend system is in a highly experimental phase**
As mentioned in the [previous section](./02-app.md), Backstage apps are built up from a tree of extensions. This section will go into more detail about what extensions are, how to create and use them, and how to create your own extensibility patterns.
## Extension Structure
Each extensions has a number of different properties that define how it behaves and how it interacts with other extensions and the rest of the app. Some of these properties are fixed, while others can be customized by integrators. The diagram below illustrates the structure of an extension.
![frontend extension structure diagram](../../assets/frontend-system/architecture-extension.drawio.svg)
### ID
The ID of an extension is used to uniquely identity it, and it should ideally by unique across the entire Backstage ecosystem. For each frontend app instance there can only be a single extension for any given ID. Installing multiple extensions with the same ID will either result in an error or one of the extensions will override the others. The ID is also used to reference the extensions from other extensions, in configuration, and in other places such as developer tools and analytics.
### Output
The output of an extension is the data that it provides to its parent extension, and ultimately its contribution to the app. The output itself comes in the form of a collection of arbitrary values, anything that can be represented as a TypeScript type. However, each individual output value must be associated with a shared reference known as an extension data reference. You must also use these same references to be able to access individual output values of an extension.
### Inputs
The inputs of an extension define the data that it received from its children. Each extension can have multiple different inputs identified by an input name. These inputs each have their own set of data that they expect, which is defined as a collection of extension data references. An extension will only have access to the data that it has explicitly requested from each input.
### Attachment Point
The attachment point of an extension decides where in the app extension tree it will be located. It is defined by the ID of the parent extension, as well as the name of the input to attach to. Through the attachment point the extension will share its own output as inputs to the parent extension. An extension can only be attached to an input that matches its own output, it is an error to try to attach an extension to an input the requires data that the extension does not provide in its output.
The attachment point is one of the configurable properties of an extension, and can be overridden by integrators. In doing so, care must be taken to make sure that one doesn't attach an extension to an incompatible input. Extensions can also only be attached to a single input and parent at a time. This means that the app extension tree can not contain any cycles, as the extension ancestry will either be terminated at the root, or be detached from it.
### Disabled
Each extension in the app can be disabled, meaning it will not be instantiated and its parent will effectively not see it in its inputs. When creating an extension you can also specify whether extensions should be disabled by default. This makes it possible to for example install multiple extensions in an app, but only choose to enable one or a few of them depending on the environment.
The ordering of extensions is sometimes very important, as it may for example affect in which order they show up in the UI. When an extension is toggled from disabled to enabled through configuration it resets the ordering of the extension, pushing it to the end of the list. It is generally recommended to leave extensions as disabled by default if their order is important, allowing for the order in which their are enabled in the configuration to determine their order in the app.
### Configuration & Configuration Schema
Each extension can define a configuration schema that describes the configuration that it accepts. This schema is used to validate the configuration provided by integrators, but also to fill in default configuration values. The configuration itself is provided by integrators in order to customize the extension. It is not possible to provide a default configuration of an extension, this must instead be done through defaults in the configuration schema. This allows for a simpler configuration logic where multiple configurations of the same extensions completely replace each other rather than being merged.
### Factory
The extension factory is the implementation of the extension itself. It is a function that is provided with any inputs and configuration that the extension received, and must produce the output that it defined. When an app instance starts up it will call the factory function of each extension that is part of the app, starting at leaf nodes and working its way up to the root of the app extension tree. The factory will only be called for active extensions, which is and extension that is not disabled and has an active parent. Extension factories should be lean and not do any heavy lifting or async work, as they are called during the initialization of the app, that should instead be deferred to the values shared through the extension outputs.
## Creating an Extensions
TODO
## Extension Data
TODO
## Extension Inputs
TODO
## Configuration Schema
TODO
## Extension Creators
TODO