This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1230" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Передача учебного trace context через две границы</title>
|
||||
<desc id="desc">Вертикальная схема показывает, как gateway создаёт span A, передаёт traceparent с общим trace-id и своим span-id, catalog создаёт child span B, а затем передаёт свой span-id к inventory. Trace-id остаётся общим.</desc>
|
||||
<style>
|
||||
.bg { fill: #071a2b; }
|
||||
.card { fill: #0d2a42; stroke: #35607f; stroke-width: 2; }
|
||||
.blue { fill: #31b8ff; }
|
||||
.cyan { fill: #b8ecff; }
|
||||
.muted { fill: #b6d0e4; font-family: Inter, Arial, sans-serif; }
|
||||
.text { fill: #eaf6ff; font-family: Inter, Arial, sans-serif; }
|
||||
.title { font-size: 32px; font-weight: 700; }
|
||||
.subtitle { font-size: 21px; }
|
||||
.label { font-size: 27px; font-weight: 700; }
|
||||
.meta { font-size: 21px; font-weight: 600; }
|
||||
.code { fill: #eaf6ff; font-family: Menlo, Consolas, monospace; font-size: 20px; }
|
||||
</style>
|
||||
<rect class="bg" width="720" height="1230" rx="34" />
|
||||
<text class="text title" x="48" y="66">Trace context на границе</text>
|
||||
<text class="muted subtitle" x="48" y="104">Учебная version 00; без реального HTTP</text>
|
||||
|
||||
<rect class="card" x="42" y="140" width="636" height="150" rx="20" />
|
||||
<circle class="blue" cx="94" cy="204" r="24" />
|
||||
<text class="text label" x="136" y="194">1. gateway создаёт span A</text>
|
||||
<text class="muted meta" x="136" y="230">trace-id: общий для истории</text>
|
||||
<text class="muted meta" x="136" y="262">span-id: A · parent: нет</text>
|
||||
|
||||
<line class="blue" x1="360" y1="310" x2="360" y2="350" stroke-width="8" stroke-linecap="round" />
|
||||
<polygon class="blue" points="344,344 376,344 360,370" />
|
||||
|
||||
<rect class="card" x="42" y="390" width="636" height="174" rx="20" />
|
||||
<text class="text label" x="70" y="432">inject: короткий carrier</text>
|
||||
<text class="code" x="70" y="474">traceparent: 00-trace-id-span-A-01</text>
|
||||
<text class="muted meta" x="70" y="514">trace-id не меняется</text>
|
||||
<text class="muted meta" x="70" y="544">parent-id — текущий span вызывающей стороны</text>
|
||||
|
||||
<line class="blue" x1="360" y1="584" x2="360" y2="624" stroke-width="8" stroke-linecap="round" />
|
||||
<polygon class="blue" points="344,618 376,618 360,644" />
|
||||
|
||||
<rect class="card" x="42" y="664" width="636" height="166" rx="20" />
|
||||
<circle class="blue" cx="94" cy="730" r="24" />
|
||||
<text class="text label" x="136" y="720">2. catalog делает extract</text>
|
||||
<text class="muted meta" x="136" y="756">создаёт span B с parent = A</text>
|
||||
<text class="muted meta" x="136" y="790">trace-id остаётся тем же</text>
|
||||
|
||||
<line class="blue" x1="360" y1="850" x2="360" y2="890" stroke-width="8" stroke-linecap="round" />
|
||||
<polygon class="blue" points="344,884 376,884 360,910" />
|
||||
|
||||
<rect class="card" x="42" y="930" width="636" height="188" rx="20" />
|
||||
<circle class="blue" cx="94" cy="994" r="24" />
|
||||
<text class="text label" x="136" y="984">3. inventory получает span B</text>
|
||||
<text class="muted meta" x="136" y="1020">новый child получит parent = B</text>
|
||||
<text class="muted meta" x="136" y="1054">меняется span-id, не trace-id</text>
|
||||
<rect class="blue" x="70" y="1076" width="580" height="2" />
|
||||
<text class="cyan meta" x="70" y="1106">Не передаём URL, пользователя, token или body</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,60 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1280" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Как читать critical path в учебной трассе</title>
|
||||
<desc id="desc">Вертикальная схема показывает, что duration родительского span включает дочерние интервалы. Критический путь состоит из exclusive сегментов gateway, catalog, inventory и adapter и даёт 240 миллисекунд. Pricing остаётся параллельной ветвью.</desc>
|
||||
<style>
|
||||
.bg { fill: #071a2b; }
|
||||
.card { fill: #0d2a42; stroke: #35607f; stroke-width: 2; }
|
||||
.blue { fill: #31b8ff; }
|
||||
.orange { fill: #f6b756; }
|
||||
.text { fill: #eaf6ff; font-family: Inter, Arial, sans-serif; }
|
||||
.muted { fill: #b6d0e4; font-family: Inter, Arial, sans-serif; }
|
||||
.title { font-size: 32px; font-weight: 700; }
|
||||
.subtitle { font-size: 21px; }
|
||||
.label { font-size: 27px; font-weight: 700; }
|
||||
.meta { font-size: 21px; font-weight: 600; }
|
||||
.big { font-size: 30px; font-weight: 700; }
|
||||
</style>
|
||||
<rect class="bg" width="720" height="1280" rx="34" />
|
||||
<text class="text title" x="48" y="66">Critical path без двойного счёта</text>
|
||||
<text class="muted subtitle" x="48" y="104">Только controlled fixture с одной шкалой</text>
|
||||
|
||||
<rect class="card" x="42" y="140" width="636" height="144" rx="20" />
|
||||
<text class="text label" x="70" y="184">1. Duration parent — inclusive</text>
|
||||
<text class="muted meta" x="70" y="222">inventory: 170 ms</text>
|
||||
<text class="muted meta" x="70" y="254">adapter: 70 ms внутри inventory</text>
|
||||
|
||||
<line class="orange" x1="360" y1="304" x2="360" y2="338" stroke-width="8" stroke-linecap="round" />
|
||||
<polygon class="orange" points="344,332 376,332 360,358" />
|
||||
|
||||
<rect class="card" x="42" y="378" width="636" height="154" rx="20" />
|
||||
<text class="text label" x="70" y="422">2. Не складываем 170 + 70</text>
|
||||
<text class="muted meta" x="70" y="462">интервалы пересекаются</text>
|
||||
<text class="muted meta" x="70" y="498">иначе одно ожидание посчитано дважды</text>
|
||||
|
||||
<line class="blue" x1="360" y1="552" x2="360" y2="586" stroke-width="8" stroke-linecap="round" />
|
||||
<polygon class="blue" points="344,580 376,580 360,606" />
|
||||
|
||||
<rect class="card" x="42" y="626" width="636" height="266" rx="20" />
|
||||
<text class="text label" x="70" y="670">3. Выбираем позднюю цепочку</text>
|
||||
<rect class="blue" x="72" y="706" width="542" height="44" rx="11" />
|
||||
<text class="bg meta" x="96" y="736">gateway exclusive · 40 ms</text>
|
||||
<rect class="blue" x="98" y="760" width="468" height="44" rx="11" />
|
||||
<text class="bg meta" x="122" y="790">catalog exclusive · 30 ms</text>
|
||||
<rect class="blue" x="124" y="814" width="394" height="44" rx="11" />
|
||||
<text class="bg meta" x="148" y="844">inventory exclusive · 100 ms</text>
|
||||
<rect class="blue" x="150" y="868" width="320" height="44" rx="11" />
|
||||
<text class="bg meta" x="174" y="898">adapter exclusive · 70 ms</text>
|
||||
|
||||
<rect class="card" x="42" y="930" width="636" height="126" rx="20" />
|
||||
<text class="text label" x="70" y="974">Pricing: параллельная ветвь</text>
|
||||
<rect class="orange" x="70" y="994" width="150" height="34" rx="9" />
|
||||
<text class="bg meta" x="94" y="1018">40 ms</text>
|
||||
<text class="muted meta" x="242" y="1018">не продлевает финал root</text>
|
||||
|
||||
<line class="blue" x1="360" y1="1076" x2="360" y2="1110" stroke-width="8" stroke-linecap="round" />
|
||||
<polygon class="blue" points="344,1104 376,1104 360,1130" />
|
||||
|
||||
<rect class="card" x="42" y="1150" width="636" height="84" rx="20" />
|
||||
<text class="text big" x="70" y="1202">40 + 30 + 100 + 70 = 240 ms</text>
|
||||
<text class="muted meta" x="70" y="1228">совпадает с root duration fixture</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,68 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1260" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Waterfall одного синтетического trace на шкале 240 миллисекунд</title>
|
||||
<desc id="desc">Вертикальная диаграмма показывает gateway, catalog, pricing, inventory и adapter. Pricing перекрывается с inventory. Критическая цепочка gateway, catalog, inventory и adapter выделена синим.</desc>
|
||||
<style>
|
||||
.bg { fill: #071a2b; }
|
||||
.panel { fill: #0d2a42; stroke: #35607f; stroke-width: 2; }
|
||||
.axis { stroke: #89aac2; stroke-width: 3; }
|
||||
.tick { stroke: #486d87; stroke-width: 2; }
|
||||
.critical { fill: #31b8ff; }
|
||||
.parallel { fill: #f6b756; }
|
||||
.text { fill: #eaf6ff; font-family: Inter, Arial, sans-serif; }
|
||||
.muted { fill: #b6d0e4; font-family: Inter, Arial, sans-serif; }
|
||||
.title { font-size: 32px; font-weight: 700; }
|
||||
.subtitle { font-size: 21px; }
|
||||
.label { font-size: 26px; font-weight: 700; }
|
||||
.meta { font-size: 21px; font-weight: 600; }
|
||||
.small { font-size: 20px; }
|
||||
</style>
|
||||
<rect class="bg" width="720" height="1260" rx="34" />
|
||||
<text class="text title" x="48" y="66">Один учебный waterfall</text>
|
||||
<text class="muted subtitle" x="48" y="104">Синтетический trace; не production latency</text>
|
||||
<rect class="panel" x="42" y="132" width="636" height="72" rx="16" />
|
||||
<text class="text meta" x="68" y="178">Root duration: 240 ms · одна logical clock</text>
|
||||
|
||||
<line class="axis" x1="116" y1="248" x2="630" y2="248" />
|
||||
<line class="tick" x1="116" y1="236" x2="116" y2="260" />
|
||||
<line class="tick" x1="245" y1="236" x2="245" y2="260" />
|
||||
<line class="tick" x1="373" y1="236" x2="373" y2="260" />
|
||||
<line class="tick" x1="502" y1="236" x2="502" y2="260" />
|
||||
<line class="tick" x1="630" y1="236" x2="630" y2="260" />
|
||||
<text class="muted small" x="106" y="224">0</text>
|
||||
<text class="muted small" x="228" y="224">60</text>
|
||||
<text class="muted small" x="351" y="224">120</text>
|
||||
<text class="muted small" x="480" y="224">180</text>
|
||||
<text class="muted small" x="600" y="224">240 ms</text>
|
||||
|
||||
<text class="text label" x="48" y="310">gateway.handle</text>
|
||||
<text class="muted meta" x="48" y="340">0–240 ms</text>
|
||||
<rect class="critical" x="116" y="362" width="514" height="48" rx="12" />
|
||||
<text class="bg meta" x="140" y="394">240 ms · root</text>
|
||||
|
||||
<line class="axis" x1="137" y1="428" x2="137" y2="466" />
|
||||
<text class="text label" x="48" y="492">catalog.lookup</text>
|
||||
<text class="muted meta" x="48" y="522">20–220 ms</text>
|
||||
<rect class="critical" x="159" y="544" width="429" height="48" rx="12" />
|
||||
<text class="bg meta" x="183" y="576">200 ms · child gateway</text>
|
||||
|
||||
<line class="axis" x1="180" y1="610" x2="180" y2="650" />
|
||||
<text class="text label" x="48" y="676">pricing.read</text>
|
||||
<text class="muted meta" x="48" y="706">30–70 ms</text>
|
||||
<rect class="parallel" x="180" y="728" width="86" height="48" rx="12" />
|
||||
<text class="bg meta" x="196" y="760">40</text>
|
||||
<text class="muted small" x="284" y="760">параллельная ветвь</text>
|
||||
|
||||
<text class="text label" x="48" y="838">inventory.fetch</text>
|
||||
<text class="muted meta" x="48" y="868">30–200 ms</text>
|
||||
<rect class="critical" x="180" y="890" width="364" height="48" rx="12" />
|
||||
<text class="bg meta" x="204" y="922">170 ms · позднее завершение</text>
|
||||
|
||||
<line class="axis" x1="330" y1="956" x2="330" y2="996" />
|
||||
<text class="text label" x="48" y="1022">inventory.adapter</text>
|
||||
<text class="muted meta" x="48" y="1052">100–170 ms</text>
|
||||
<rect class="critical" x="330" y="1074" width="150" height="48" rx="12" />
|
||||
<text class="bg meta" x="356" y="1106">70 ms</text>
|
||||
|
||||
<rect class="panel" x="42" y="1152" width="636" height="68" rx="16" />
|
||||
<text class="text meta" x="68" y="1194">Критический путь: gateway → catalog → inventory → adapter</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
Reference in New Issue
Block a user