-
Notifications
You must be signed in to change notification settings - Fork 54
Observability Pipeline images
Hillary Fraley edited this page Nov 22, 2022
·
2 revisions
Observability pipeline images developed as SVGs are displayed on the following pages:
- https://docs.sensu.io/
- https://docs.sensu.io/sensu-go/latest/
- https://docs.sensu.io/sensu-go/latest/observability-pipeline/
- https://docs.sensu.io/sensu-go/latest/observability-pipeline/observe-entities/
- https://docs.sensu.io/sensu-go/latest/observability-pipeline/observe-events/
- https://docs.sensu.io/sensu-go/latest/observability-pipeline/observe-schedule/
- https://docs.sensu.io/sensu-go/latest/observability-pipeline/observe-filter/
- https://docs.sensu.io/sensu-go/latest/observability-pipeline/observe-transform/
- https://docs.sensu.io/sensu-go/latest/observability-pipeline/observe-process/
SVGs are not displayed in PDFs, so you must replace the SVG code with the following figure shortcodes before you generate the offline docs PDF. The PNG files are already saved in the static images directory:
{{< figure src="/images/observability-pipeline.png" link="/images/observability-pipeline.png" target="_blank" >}}
{{< figure src="/images/observability-pipeline-entities.png" link="/images/observability-pipeline-entities.png" target="_blank" >}}
{{< figure src="/images/observability-pipeline-events.png" link="/images/observability-pipeline-events.png" target="_blank" >}}
{{< figure src="/images/observability-pipeline-filter.png" link="/images/observability-pipeline-filter.png" target="_blank" >}}
{{< figure src="/images/observability-pipeline-process.png" link="/images/observability-pipeline-process.png" target="_blank" >}}
{{< figure src="/images/observability-pipeline-schedule.png" link="/images/observability-pipeline-schedule.png" target="_blank" >}}
{{< figure src="/images/observability-pipeline-transform.png" link="/images/observability-pipeline-transform.png" target="_blank" >}}
The images were created using Lucidchart. If you need to adjust the images, here are the Lucidchart links:
- observability-pipeline https://lucid.app/lucidchart/invitations/accept/inv_5667d9dd-7222-40ea-926f-00eeb42d4f71?viewport_loc=-113%2C-223%2C1579%2C877%2C0_0
- observability-pipeline-obs-pipeline-page https://lucid.app/lucidchart/invitations/accept/inv_85990e08-59b6-44cb-ad37-203b21d26750?viewport_loc=-113%2C-257%2C1579%2C877%2C0_0
- observability-pipeline-schedule https://lucid.app/lucidchart/invitations/accept/inv_97577c4e-a1eb-414d-b65f-b79e3d3a8199?viewport_loc=-113%2C-257%2C1579%2C877%2C0_0
- observability-pipeline-entities https://lucid.app/lucidchart/invitations/accept/inv_8edb4df1-bcae-4656-b2d0-b6acbe71f85d?viewport_loc=-113%2C-257%2C1579%2C877%2C0_0
- observability-pipeline-events https://lucid.app/lucidchart/invitations/accept/inv_c903fbd7-72f7-4827-b1f0-5b637b5b8e49?viewport_loc=-113%2C-223%2C1579%2C877%2C0_0
- observability-pipeline-filter https://lucid.app/lucidchart/invitations/accept/inv_8036c43c-a4b7-4425-9dae-efbc1fb32ae2?viewport_loc=-113%2C-257%2C1579%2C877%2C0_0
- observability-pipeline-transform https://lucid.app/lucidchart/invitations/accept/inv_714098f2-65e0-49e8-aa63-ee602ac7c682?viewport_loc=-113%2C-223%2C1579%2C877%2C0_0
- observability-pipeline-process https://app.lucidchart.com/invitations/accept/77921c26-a633-4c38-b39d-9442a6d3a5c5
Use green (#B3D971) outline 10px for individual shapes.
Use relative links in images.
Follow these steps to export the code for an updated SVG image from Lucidchart:
- File > Export > SVG
- Options: File Format = SVG and Crop = Crop to Content
- Click Download
- Copy SVG files into sensu-go/static/images
- Open SVG files in text editor
- Replace
width="1380.42" height="404.01"
withviewBox="0 0 1400 405" preserveAspectRatio="xMidYMid meet"
to scale the SVG to the available space and resize responsively - Replace
http://
with/
or removehttp://
altogether to create relative links - Add code comment just inside the tag that includes the link to the source image in Lucidchart
- Save all updates to the SVG file
- Copy all code in the SVG file and paste as inline code in the markdown content file where you want the image to appear