[Streams] Add curl/HTTP example to Logs Stream onboarding (elastic#241073)

Copilot · flash1293 · wildemat · commit 6e06a6b9a3aa · 2025-11-05T13:19:04.000-05:00
Adds a curl/HTTP tab to the Streams Settings flyout onboarding, providing users with a direct HTTP example for ingesting logs via the `_bulk` API. ## Changes - Added curl/HTTP as fifth shipper option alongside OTel, Filebeat, Logstash, and Fleet - Added descriptive text above the curl code block explaining how to use the Bulk API, with a link to the Elasticsearch Bulk API documentation - Added NDJSON bulk API example showing two log ingestion patterns: - Structured format with nested `body` and `resource.attributes` - Flat format with top-level `message` and `host.name` - Configured JSON syntax highlighting for curl/HTTP tab (other tabs remain YAML) ```typescript // Example displayed in curl/HTTP tab POST /logs/_bulk { "create": {} } { "@timestamp": "2025-05-05T12:12:12", "body": { "text": "Hello world!" }, "resource": { "attributes": { "host.name": "my-host-name" } } } { "create": {} } { "@timestamp": "2025-05-05T12:12:12", "message": "Hello world!", "host.name": "my-host-name" } ``` Aligns with <a href="https://github.com/elastic/docs-content/pull/3683">docs-content#3683</a>. Fixes elastic#241059  <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>[Streams] Add curl example to Logs Stream onboarding</issue_title> > <issue_description>similar to the docs change, let's add one tab with the same curl snippet: > > elastic/docs-content#3683 > > <img width="1410" height="1322" alt="Image" src="https://github.com/user-attachments/assets/0995ec98-0c65-49bb-8eff-bce7b836d071" /></issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > <comment_new><author>@elasticmachine</author><body> > Pinging @elastic/obs-ux-logs-team (Team:obs-ux-logs)</body></comment_new> > <comment_new><author>@flash1293</author><body> > The tabs in `x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/streams_settings_flyout.tsx` need to be extended for this. The tab should be called `curl`, the content should be > > ``` > POST /logs/_bulk > { "create": {} } > { "@timestamp": "2025-05-05T12:12:12", "body": { "text": "Hello world!" }, "resource": { "attributes": { "host.name": "my-host-name" } } } > { "create": {} } > { "@timestamp": "2025-05-05T12:12:12", "message": "Hello world!", "host.name": "my-host-name" } > ```</body></comment_new> > </comments> > </details> - Fixes elastic#241059  --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: flash1293 <1508364+flash1293@users.noreply.github.com>
diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/streams_settings_flyout.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/streams_settings_flyout.tsx
@@ -145,6 +145,10 @@ export function StreamsSettingsFlyout({
       id: `${shipperButtonGroupPrefix}__fleet`,
       label: 'Fleet',
     },
+    {
+      id: `${shipperButtonGroupPrefix}__curl`,
+      label: 'curl/HTTP',
+    },
   ];
   const [selectedShipperId, setSelectedShipperId] = React.useState(
     `${shipperButtonGroupPrefix}__otel`
@@ -188,6 +192,11 @@ output.elasticsearch:
     action => "create"
   }
 }`,
+    [`${shipperButtonGroupPrefix}__curl`]: `POST /logs/_bulk
+{ "create": {} }
+{ "@timestamp": "2025-05-05T12:12:12", "body": { "text": "Hello world!" }, "resource": { "attributes": { "host.name": "my-host-name" } } }
+{ "create": {} }
+{ "@timestamp": "2025-05-05T12:12:12", "message": "Hello world!", "host.name": "my-host-name" }`,
   };
 
   return (
@@ -352,14 +361,39 @@ output.elasticsearch:
                 </ul>
               </EuiText>
             ) : (
-              <EuiCodeBlock
-                language="yaml"
-                isCopyable
-                paddingSize="m"
-                data-test-subj="streamsShipperConfigExample"
-              >
-                {shipperConfigExamples[selectedShipperId]}
-              </EuiCodeBlock>
+              <>
+                {selectedShipperId.endsWith('__curl') && (
+                  <EuiText size="s">
+                    <p>
+                      <FormattedMessage
+                        id="xpack.streams.streamsListView.shipperConfigCurlDescription"
+                        defaultMessage="Send data to the {logsEndpoint} endpoint using the {bulkApiLink}. Refer to the following example for more information:"
+                        values={{
+                          logsEndpoint: <code>/logs/</code>,
+                          bulkApiLink: (
+                            <EuiLink
+                              href="https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-bulk"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              external
+                            >
+                              Bulk API
+                            </EuiLink>
+                          ),
+                        }}
+                      />
+                    </p>
+                  </EuiText>
+                )}
+                <EuiCodeBlock
+                  language={selectedShipperId.endsWith('__curl') ? 'json' : 'yaml'}
+                  isCopyable
+                  paddingSize="m"
+                  data-test-subj="streamsShipperConfigExample"
+                >
+                  {shipperConfigExamples[selectedShipperId]}
+                </EuiCodeBlock>
+              </>
             )}
           </EuiFlexGroup>
         </EuiFlyoutBody>
