[DOCS] Update ingest node pipelines doc (#79187) (#80337)

Author: alisonelizabeth

docs/management/ingest-pipelines/images/ingest-pipeline-processor.png

@@ -62,11 +62,40 @@ You also want to know where the request is coming from.
 
 . In *Ingest Node Pipelines*, click *Create a pipeline*.
 . Provide a name and description for the pipeline.
-. Define the processors:
+. Add a grok processor to parse the log message:
+
+.. Click *Add a processor* and select the *Grok* processor type.
+.. Set the field input to `message` and enter the following grok pattern:
 +
 [source,js]
 ----------------------------------
-[
+%{IPORHOST:clientip} %{USER:ident} %{USER:auth} \[%{HTTPDATE:timestamp}\] "%{WORD:verb} %{DATA:request} HTTP/%{NUMBER:httpversion}" %{NUMBER:response:int} (?:-|%{NUMBER:bytes:int}) %{QS:referrer} %{QS:agent}
+----------------------------------
++
+.. Click *Update* to save the processor.
+
+. Add processors to map the date, IP, and user agent fields.
+
+.. Map the appropriate field to each processor type:
++
+--
+* **Date**: `timestamp`
+* **GeoIP**: `clientip`
+* **User agent**: `agent`
+
+For the **Date** processor, you also need to specify the date format you want to use: `dd/MMM/YYYY:HH:mm:ss Z`.
+--
+Your form should look similar to this:
++
+[role="screenshot"]
+image:management/ingest-pipelines/images/ingest-pipeline-processor.png["Processors for Ingest Node Pipelines"]
++
+Alternatively, you can click the **Import processors** link and define the processors as JSON:
++
+[source,js]
+----------------------------------
+{
+  "processors": [
     {
       "grok": {
         "field": "message",
@@ -90,19 +119,16 @@ You also want to know where the request is coming from.
       }
     }
   ]
+}
 ----------------------------------
 +
-This code defines four {ref}/ingest-processors.html[processors] that run sequentially:
+The four {ref}/ingest-processors.html[processors] will run sequentially:
 {ref}/grok-processor.html[grok], {ref}/date-processor.html[date],
-{ref}/geoip-processor.html[geoip], and {ref}/user-agent-processor.html[user_agent].
-Your form should look similar to this:
-+
-[role="screenshot"]
-image:management/ingest-pipelines/images/ingest-pipeline-processor.png["Processors for Ingest Node Pipelines"]
+{ref}/geoip-processor.html[geoip], and {ref}/user-agent-processor.html[user_agent]. You can reorder processors using the arrow icon next to each processor. 
 
-. To verify that the pipeline gives the expected outcome, click *Test pipeline*.
+. To test the pipeline to verify that it produces the expected results, click *Add documents*.
 
-. In the *Document* tab, provide the following sample document for testing:
+. In the *Documents* tab, provide a sample document for testing:
 +
 [source,js]
 ----------------------------------